最近，有个朋友，想通过封装element-ui组件弹窗在js文件中通过状态控制达到弹出效果，为此，我也查到了相关文章：vue中如何用纯js调用组件_vue在js文件中使用vue组件-CSDN博客
这里我就写一下我通过上述文章封装el-dialog弹窗的过程。
第一步，封装一个组件文件-elDialog.vue
<template>
<el-dialog :title="title" :visible.sync="visible" width="720px" @closed="closed(2)">
<p>弹窗内容</p>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
title: '默认标题' // 这里可以设置需要在弹窗展示的字段
...
}
},
methods: {
closed(val) { // 关闭弹窗，回调函数
this.callback && this.callback(val)
}
}
}
</script>
下面内容需要了解一个属性：Vue.extend,想认真了解的可以参考下面链接
Vue.extend 看完这篇，你就学废了。Vue.extend(options):基础Vue构造器参数是一个包含组件 - 掘金
第二步，在你公共js文件中创建关于弹窗的方法
import Dialog from '../../components/elDialog.vue'; // 引入文件
import Vue from 'vue'
const errorDialog = (options = {}) => {
const Dialogs = Vue.extend(Dialog);
let data = {}, methods = {};
Object.keys(options).forEach(e => {
if (typeof options[e] === 'function') { // 判断是不是方法
methods[e] = options[e]
} else {
data[e] = options[e]
}
})
console.log(data,methods);
let instance = new Dialogs({
data: data,
methods: methods
})
document.body.appendChild(instance.$mount().$el); // 在body中追加元素
}
export default errorDialog
main.js
import elDialogs from './common/js/commonExt';
Vue.prototype.$elDialogs = elDialogs // 注册
index.vue 在需要使用弹窗的地方使用
this.$elDialogs({
visible: true,
title: '温馨提示', // 需要展示别的内容在封装组件中追加，往下添加即可
callback: val => {
console.log(val,666);
})
感谢！
