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


Posted in Javascript onJanuary 22, 2021

封装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 弹窗组件封装的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
ReactJs设置css样式的方法
Jun 08 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 #Javascript
原生js实现放大镜组件
Jan 22 #Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
原生js实现滑块区间组件
Jan 20 #Javascript
原生js实现下拉框选择组件
Jan 20 #Javascript
You might like
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
几种tab切换详解
2017/02/03 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
js实现随机8位验证码
2020/07/24 Javascript
浅析Python 读取图像文件的性能对比
2019/03/07 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Python Merge函数原理及用法解析
2020/09/16 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
新文化运动的基本口号
2014/06/21 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
逃课检讨书
2015/01/26 职场文书
单位实习介绍信
2015/05/05 职场文书
大学推普周活动总结
2015/05/07 职场文书
军训结束新闻稿
2015/07/17 职场文书
春季运动会加油词
2015/07/18 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL