element-ui 弹窗组件封装的步骤
这篇文章主要介绍了element-ui 弹窗组件封装的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
封装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.js export 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 弹窗组件封装的步骤的详细内容