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 陷阱 window全局对象
Nov 26 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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 fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
ES6入门教程之Class和Module详解
2017/05/17 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
详解Python中is和==的区别
2019/03/21 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
医学生自荐信
2013/12/03 职场文书
教师绩效考核方案
2014/01/21 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python3.10的一些新特性原理分析
2021/09/15 Python
Python if else条件语句形式详解
2022/03/24 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript