封装el-dialog为一个组件
我们在使用element-ui的时候，如果一个弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下：
|
1
2
3
4
5
6
|
<!-- DetailDialog.vue html --><template> <el-dialog title="标题" :visible.sync="visible" width="720px" > <p>弹窗内容</p> </el-dialog></template> |
|
1
2
3
4
5
6
7
8
9
|
// DetailDialog.vue js<script> props: { visible: { type: Boolean, default: false } }</script> |
el-dialog会修改 props，并报错
但是这样会有一个问题，当触发了el-dialog内部的关闭事件时， 比如点击弹窗阴影等， 它会emit事件来修改当前组件的props [visible]，由于组件不能直接修改prop属性，然后就会报错。
我们新增了一个中间变量innerVisible，来拦截props [visible]的修改和获取
|
1
2
3
4
5
6
|
<!-- DetailDialog.vue html --><template> <el-dialog title="标题" :visible.sync="innerVisible" width="720px" > <p>弹窗内容</p> </el-dialog></template> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// DetailDialog.vue js<script>export default { props: { visible: { type: Boolean, default: false } }, computed: { innerVisible: { get: function() { return this.visible }, set: function(val) { this.$emit('update:visible', val) } } }}</script> |
这样在el-dialog内部修改prop[visible]的时候，我们会通过emit('update:')的方式来通知父组件，避免直接修改props。当然父组件需要加上sync修饰符来接受修改：
|
1
2
|
<!-- father.vue html --><DetailDialog :visible.sync="detailVisible" /> |
到此为止，封装的弹窗组件已经没有问题了。
继续优化，使用v-model控制显示隐藏
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// DetailDialog.vue js<script>export default { model: { prop: 'visible', // 修改 v-model 绑定的props名称 event: 'toggle' // 修改 v-model 绑定的自定义事件名 }, props: { visible: { type: Boolean, default: false } }, computed: { innerVisible: { get: function() { return this.visible }, set: function(val) { this.$emit('update:toggle', val) } } }}</script> |
接入了v-model，使用起来就更高大上而且整洁了
|
1
2
|
<!-- father.vue html --><DetailDialog v-model="detailVisible" /> |
继续优化，封装成mixins
当频繁封装弹窗组件时，那么上述逻辑也需要不停地复制，所以继续优化，把上述控制显示隐藏的逻辑封装成了mxins，直接复用即可
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// vModelDialog.jsexport default { model: { prop: 'visible', event: 'toggle' }, props: { visible: { type: Boolean, default: () => { return false } } }, computed: { innerVisible: { get: function() { return this.visible }, set: function(val) { this.$emit('toggle', val) } } }} |
那么封装弹窗插件时，只需引入mixins即可完成显示隐藏逻辑。
|
1
2
3
4
5
6
7
|
// DetailDialog.vue js<script>import vModelDialog from './vModelDialog.js'export default { mixins: [vModelDialog],}</script> |
以上就是element-ui 弹窗组件封装的步骤的详细内容，更多关于element-ui 弹窗组件封装的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6920160545962197006
