• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
七七小嗳 显示全部楼层 发表于 2021-10-25 20:07:48 |阅读模式 打印 上一主题 下一主题
封装el-dialog为一个组件


我们在使用element-ui的时候,如果一个弹窗中的内容很多,那么我们经常会把这个弹窗封装成一个组件,如下:
  1. <!-- DetailDialog.vue html -->
  2. <template>
  3. <el-dialog title="标题" :visible.sync="visible" width="720px" >
  4.   <p>弹窗内容</p>
  5. </el-dialog>
  6. </template>
复制代码
  1. // DetailDialog.vue js
  2. <script>
  3. props: {
  4.   visible: {
  5.    type: Boolean,
  6.    default: false
  7.   }
  8. }
  9. </script>
复制代码
el-dialog会修改 props,并报错


但是如许会有一个标题,当触发了el-dialog内部的关闭变乱时, 好比点击弹窗阴影等, 它会emit变乱来修改当前组件的props [visible],由于组件不能直接修改prop属性,然后就会报错。
我们新增了一个中心变量innerVisible,来拦截props [visible]的修改和获取
  1. <!-- DetailDialog.vue html -->
  2. <template>
  3. <el-dialog title="标题" :visible.sync="innerVisible" width="720px" >
  4.   <p>弹窗内容</p>
  5. </el-dialog>
  6. </template>
复制代码
  1. // DetailDialog.vue js
  2. <script>
  3. export default {
  4. props: {
  5.   visible: {
  6.    type: Boolean,
  7.    default: false
  8.   }
  9. },
  10. computed: {
  11.   innerVisible: {
  12.    get: function() {
  13.     return this.visible
  14.    },
  15.    set: function(val) {
  16.     this.$emit('update:visible', val)
  17.    }
  18.   }
  19. }
  20. }
  21. </script>
复制代码
如许在el-dialog内部修改prop[visible]的时候,我们会通过emit('update:')的方式来关照父组件,避免直接修改props。固然父组件必要加上sync修饰符来担当修改:
  1. <!-- father.vue html -->
  2. <DetailDialog :visible.sync="detailVisible" />
复制代码
到此为止,封装的弹窗组件已经没有标题了。
继续优化,使用v-model控制表现隐蔽
  1. // DetailDialog.vue js
  2. <script>
  3. export default {
  4. model: {
  5.   prop: 'visible', // 修改 v-model 绑定的props名称
  6.   event: 'toggle' // 修改 v-model 绑定的自定义事件名
  7. },
  8. props: {
  9.   visible: {
  10.    type: Boolean,
  11.    default: false
  12.   }
  13. },
  14. computed: {
  15.   innerVisible: {
  16.    get: function() {
  17.     return this.visible
  18.    },
  19.    set: function(val) {
  20.     this.$emit('update:toggle', val)
  21.    }
  22.   }
  23. }
  24. }
  25. </script>
复制代码
接入了v-model,使用起来就更高大上而且整洁了
  1. <!-- father.vue html -->
  2. <DetailDialog v-model="detailVisible" />
复制代码
继续优化,封装成mixins


当频仍封装弹窗组件时,那么上述逻辑也必要不停地复制,以是继续优化,把上述控制表现隐蔽的逻辑封装成了mxins,直接复用即可
  1. // vModelDialog.js
  2. export default {
  3. model: {
  4.   prop: 'visible',
  5.   event: 'toggle'
  6. },
  7. props: {
  8.   visible: {
  9.    type: Boolean,
  10.    default: () => {
  11.     return false
  12.    }
  13.   }
  14. },
  15. computed: {
  16.   innerVisible: {
  17.    get: function() {
  18.     return this.visible
  19.    },
  20.    set: function(val) {
  21.     this.$emit('toggle', val)
  22.    }
  23.   }
  24. }
  25. }
复制代码
那么封装弹窗插件时,只需引入mixins即可完成表现隐蔽逻辑。
  1. // DetailDialog.vue js
  2. <script>
  3. import vModelDialog from './vModelDialog.js'
  4. export default {
  5. mixins: [vModelDialog],
  6. }
  7. </script>
复制代码
以上就是element-ui 弹窗组件封装的步骤的详细内容,更多关于element-ui 弹窗组件封装的资料请关注草根技能分享其它干系文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作