使用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小知识
Oct 15 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JSON格式化输出
2014/11/10 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
微信小程序如何访问公众号文章
2019/07/08 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
wxPython学习之主框架实例
2014/09/28 Python
python中查看变量内存地址的方法
2015/05/05 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
快速入手Python字符编码
2016/08/03 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
音乐器材管理制度
2014/01/31 职场文书
重阳节登山活动方案
2014/02/03 职场文书
公证委托书大全
2014/04/04 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014年终工作总结范本
2014/12/15 职场文书
学校财务管理制度
2015/08/04 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
物业管理交接协议书
2016/03/24 职场文书