兴国资源网 Design By www.nnzcdc.com
封装el-dialog为一个组件
我们在使用element-ui的时候,如果一个弹窗中的内容很多,那么我们经常会把这个弹窗封装成一个组件,如下:
<!-- DetailDialog.vue html --> <template> <el-dialog title="标题" :visible.sync="visible" width="720px" > <p>弹窗内容</p> </el-dialog> </template>
// DetailDialog.vue js <script> props: { visible: { type: Boolean, default: false } } </script>
el-dialog会修改 props,并报错
但是这样会有一个问题,当触发了el-dialog内部的关闭事件时, 比如点击弹窗阴影等, 它会emit事件来修改当前组件的props [visible],由于组件不能直接修改prop属性,然后就会报错。
我们新增了一个中间变量innerVisible,来拦截props [visible]的修改和获取
<!-- DetailDialog.vue html --> <template> <el-dialog title="标题" :visible.sync="innerVisible" width="720px" > <p>弹窗内容</p> </el-dialog> </template>
// 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修饰符来接受修改:
<!-- father.vue html --> <DetailDialog :visible.sync="detailVisible" />
到此为止,封装的弹窗组件已经没有问题了。
继续优化,使用v-model控制显示隐藏
// 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,使用起来就更高大上而且整洁了
<!-- father.vue html --> <DetailDialog v-model="detailVisible" />
继续优化,封装成mixins
当频繁封装弹窗组件时,那么上述逻辑也需要不停地复制,所以继续优化,把上述控制显示隐藏的逻辑封装成了mxins,直接复用即可
// 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即可完成显示隐藏逻辑。
// DetailDialog.vue js <script> import vModelDialog from './vModelDialog.js' export default { mixins: [vModelDialog], } </script>
以上就是element-ui 弹窗组件封装的步骤的详细内容,更多关于element-ui 弹窗组件封装的资料请关注其它相关文章!
兴国资源网 Design By www.nnzcdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
兴国资源网 Design By www.nnzcdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]