美文网首页
element-ui 弹窗组件封装 极简方案

element-ui 弹窗组件封装 极简方案

作者: 漓漾li | 来源:发表于2021-01-22 14:41 被阅读0次

    封装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 弹窗组件封装 极简方案

          本文链接:https://www.haomeiwen.com/subject/izwszktx.html