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

·  阅读 2435

封装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>
复制代码

懒人提效系列:

面对重复的代码、逻辑,如何提高开发效率

使用类名,高效快捷的进行flex布局

业务常量的简洁使用方案:消除恶心的find与魔法值

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改