element ui表格封装,vue封装element组件
本文主要介绍element-ui弹出组件的打包步骤，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
封装el-dialog为一个组件
当我们使用element-ui时，如果一个弹出窗口中有很多内容，那么我们通常会将这个弹出窗口封装到一个组件中，如下所示：
！- DetailDialog.vue html -
模板
El-dialog title= title :visible . sync= visible width= 720 px
p弹出内容/p
/el-dialog
/模板
//DetailDialog.vue js
脚本
道具：{
可见：{
类型：布尔型，
默认值：false
}
}
/脚本
el-dialog会修改 props，并报错
但是，会有一个问题。当el-dialog内部的close事件被触发时，比如点击弹出窗口的阴影，就会发出事件来修改当前组件的prop [visible]。由于组件不能直接修改prop属性，它将报告一个错误。
我们添加了一个中间变量innerVisible来拦截props [visible]的修改和获取
！- DetailDialog.vue html -
模板
El-dialog title= title :visible . sync= inner visible width= 720 px
p弹出内容/p
/el-dialog
/模板
//DetailDialog.vue js
脚本
导出默认值{
道具：{
可见：{
类型：布尔型，
默认值：false
}
},
计算值：{
内部可见：{
get: function() {
返回此. visible
},
集合：函数(val) {
这个。$emit(update:visible ，val)
}
}
}
}
/脚本
这样，在el-dialog内修改prop[visible]时，我们会通过emit(update:)通知父组件，避免直接修改props。当然，父组件需要同步修改器来接受修改：
！-父亲. vue html -
detail dialog:visible . sync= detail visible /
到目前为止，打包的弹窗组件没有任何问题。
继续优化，使用v-model控制显示隐藏
//DetailDialog.vue js
脚本
导出默认值{
型号：{
Prop: visible ，//修改v-model绑定的Prop名称
Event: toggle //修改v模型绑定的自定义事件名称
},
道具：{
可见：{
类型：布尔型，
默认值：false
}
},
计算值：{
内部可见：{
get: function() {
返回此. visible
},
集合：函数(val) {
这个。$emit(update:toggle ，val)
}
}
}
}
/脚本
有了v-model的接入，使用起来更高更整洁。
！-父亲. vue html -
detail dialog v-model= detail visible /
继续优化，封装成mixins
在频繁打包弹出组件时，需要不断复制上述逻辑，所以继续优化，将隐藏在上述控件显示中的逻辑打包成mxins，可以直接重用。
//vModelDialog.js
导出默认值{
型号：{
道具：“可见”，
事件：“切换”
},
道具：{
可见：{
类型：布尔型，
默认值：()={
返回false
}
}
},
计算值：{
内部可见：{
get: function() {
返回此. visible
},
集合：函数(val) {
这个。$emit(toggle ，val)
}
}
}
}
那么在打包弹出插件的时候，我们只需要引入mixins就可以完成显示和隐藏逻辑。
//DetailDialog.vue js
脚本
从“”导入vModelDialog。/vModelDialog.js
导出默认值{
mixins: [vModelDialog]，
}
/脚本
以上就是element-ui弹出包的步骤细节。更多关于element-ui弹出包的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。