element-ui 弹窗组件封装的步骤

2023-07-06 11:47:02 164

el-dialog会修改props，并报错

但是这样会有一个问题，当触发了el-dialog内部的关闭事件时，比如点击弹窗阴影等，它会emit事件来修改当前组件的props[visible]，由于组件不能直接修改prop属性，然后就会报错。

我们新增了一个中间变量innerVisible，来拦截props[visible]的修改和获取

//DetailDialog.vuejs

这样在el-dialog内部修改prop[visible]的时候，我们会通过emit('update:')的方式来通知父组件，避免直接修改props。当然父组件需要加上sync修饰符来接受修改：

到此为止，封装的弹窗组件已经没有问题了。

继续优化，使用v-model控制显示隐藏

//DetailDialog.vuejs

接入了v-model，使用起来就更高大上而且整洁了

继续优化，封装成mixins

当频繁封装弹窗组件时，那么上述逻辑也需要不停地复制，所以继续优化，把上述控制显示隐藏的逻辑封装成了mxins，直接复用即可

//vModelDialog.js exportdefault{ model:{ prop:'visible', event:'toggle' }, props:{ visible:{ type:Boolean, default:()=>{ returnfalse } } }, computed:{ innerVisible:{ get:function(){ returnthis.visible }, set:function(val){ this.$emit('toggle',val) } } } }

那么封装弹窗插件时，只需引入mixins即可完成显示隐藏逻辑。

//DetailDialog.vuejs

以上就是element-ui弹窗组件封装的步骤的详细内容，更多关于element-ui弹窗组件封装的资料请关注毛票票其它相关文章！

element-ui 弹窗组件封装的步骤

封装el-dialog为一个组件

el-dialog会修改props，并报错

继续优化，使用v-model控制显示隐藏

继续优化，封装成mixins

随机推荐

element-ui 弹窗组件封装的步骤

封装el-dialog为一个组件

el-dialog会修改props，并报错

继续优化，使用v-model控制显示隐藏

继续优化，封装成mixins

热门推荐

随机推荐