使用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 相关文章推荐
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python实现简易动态时钟
2018/11/19 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
学习委员自我鉴定
2014/01/13 职场文书
产假请假条
2014/04/10 职场文书
公司委托书格式范本
2014/09/16 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
聘任通知书
2015/09/21 职场文书
生活委员竞选稿
2015/11/21 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python