使用vue实现各类弹出框组件


Posted in Javascript onJuly 03, 2019

使用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装:

实现动态传入内容,实现取消,确认等回调函数。

首先写一个基本的弹窗样式,如上图所示。

在需要用到弹窗的地方中引入组件:

import dialogBar from './dialog.vue'
components:{
  'dialog-bar': dialogBar,
},
<dialog-bar></dialog-bar>

点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示

在弹窗组件中定义一个value值:v-model="sendVal",sendVal初始值为false。

在打开弹窗的方法中赋值:

openMask(){
  this.sendVal = true;
}

在dialog.vue组件中做如下操作:

props: {
  value: {}  // 注意此处获取的value对应的就是组件标签中的v-model
}

定义一个showMask变量用于控制是否显示弹窗

mounted(){
  this.showMask = this.value;  // 在生命周期中,把获取的value值获取给showMash
},
watch:{
  value(newVal, oldVal){
    this.showMask = newVal;   // 监测value的变化,并赋值。
  },
  showMask(val) {
    this.$emit('input', val);  // 此处监测showMask目的为关闭弹窗时,重新更换value值,注意emit的事件一定要为input。
  }
},

而要想关闭弹窗,只需要定义一个方法:

closeMask(){
  this.showMask = false;
},

此刻已经可以实现弹窗的显示与退出。

下面我们要实现的是动态添加标题,内容等,在组件标签中加入title,content:

<dialog-bar title="我是标题" content="我是内容"></dialog-bar>

可以运用vue的数据双向绑定,更换title,content。

在dialog.vue中获取内容:

props: {
value: {},
  content: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
},

<div class="dialog-title">{{title}}</div>
<div class="content" v-html="content"></div>

我们可以运用同样的原理来获取不同按钮中的自定名称。

下面我们利用传入的不同type来确定不同的按钮,并提供不同的回调函数。

<dialog-bar title="我是标题" content="我是内容" type="danger" dangerText="这是删除按钮"></dialog-bar>

如传入type为danger,我们可以在dialog.vue中props获取type,并定义一个如下按钮:

<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
  {{dangerText}}
</div>

dangerBtn(){
  this.$emit('danger');  // 发送一个danger事件作为回调函数
  this.closeMask();  // 关闭弹窗
},

在标签中定义danger的回调并做一些操作:

<dialog-bar title="我是标题" content="我是内容" type="danger" dangerText="这是删除按钮" @danger="clickDanger()"></dialog-bar>

clickDanger(){
  console.log("这里是回调函数")
},

同样原理可以获取和增添一些其他的操作:

props: {
    value: {},
    // 类型包括 defalut 默认, danger 危险, confirm 确认,
    type:{
      type: String,
      default: 'default'
    },
    content: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    dangerText: {
      type: String,
      default: '删除'
    },
  },

<div class="btns">
  <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
    {{cancelText}}
  </div>
  <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
    {{dangerText}}
  </div>
  <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
    {{confirmText}}
  </div>
</div>

点击此处去github下载弹窗代码: https://github.com/wwjhzc/vue-dialog

总结

以上所述是小编给大家介绍的使用vue实现各类弹出框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
javascript时间函数大全
Jun 30 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
详解JS数组方法
Nov 20 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 #Javascript
使用微信SDK自定义分享的方法
Jul 03 #Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 #Javascript
8 个有用的JS技巧(推荐)
Jul 03 #Javascript
vue swipe自定义组件实现轮播效果
Jul 03 #Javascript
20个必会的JavaScript面试题(小结)
Jul 02 #Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 #Javascript
You might like
php数组的一些常见操作汇总
2011/07/17 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP可变函数的使用详解
2013/06/14 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
Django中几种重定向方法
2015/04/28 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python count函数使用方法实例解析
2020/03/23 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
单位介绍信范文
2014/01/18 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
护理实习生带教计划
2015/01/16 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
导游词之任弼时故居
2020/01/07 职场文书