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

封装el-diaLOG为一个组件

我们在使用element-ui的时候，如果一个弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下：

!-- DetailDialog.vue htML -->
    template>
     el-dialog tITle="标题" :visible.sync="visible" width="720px" >
      p>
    弹窗内容/p>
     /el-dialog>
    /template>
    

// DetailDialog.vue jsscript>
 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 jsscript>
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 jsscript>
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.jsexport 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 jsscript>
import vModelDialog From './vModelDialog.js'export default {
 mixins: [vModelDialog],}
    /script>
    

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

• element-ui封装一个Table模板组件的示例
• 详解如何在vue+element-ui的项目中封装dialog组件
• 基于element-ui封装可搜索的懒加载tree组件的实现
• vue element-ui之怎么封装一个自己的组件的详解
• vue 基于element-ui 分页组件封装的实例代码
• VUE2.0+Element-UI+Echarts封装的组件实例
• vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！