用途: 解决在一些微前端项目中, B工程使用A工程的弹窗代码
// MaterialListPlugin.js文件, 在项目入口引入
// eg: 在main.js中添加一行 import '@/components/MaterialListPlugin.js'import Vue from 'vue'
import MaterialListPlugin from '@/components/MaterialListPlugin.vue' // 简单的弹窗示例function showDialog(options) {const Dialog = Vue.extend(MaterialListPlugin)const app = new Dialog().$mount(document.createElement('div'))// options:{} 绑定this中的属性for (const key in options) {app[key] = options[key]}document.body.appendChild(app.$el) //注入htmlreturn app // 返回实例以供页面调用
}Vue.prototype.$MyMaterial = showDialog
页面调用: this.$MyMaterial().onShow() // onShow是vue页面的方法, 唤起弹窗的
// MaterialListPlugin.vue文件 (简单的弹窗示例)
<template><my-dialog :visible="dialogShow"><div class="my-dialog-content">// 弹窗内容</div><template v-slot:footer><t-button @click="onHide">取消</t-button><t-button @click="onConfirm">确认</t-button></template></my-dialog>
</template><script>
export default {name: 'materialWordPlugin',data() {return {dialogShow: false,}},methods: {// 弹窗显示onShow() {this.dialogShow = true},// 弹窗隐藏onHide() {this.dialogShow = false},// 确定按钮onConfirm() {this.onHide()},},
}
</script>参考: Vue中Vue.extend()的使用及解析_vue.js_脚本之家
