DDR爱好者之家

element-ui 弹窗组件封装的步骤
站长资源 2024/11/23 佚名
63 1538
DDR爱好者之家 Design By 杰米

封装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 弹窗组件封装的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米