使用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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
模仿OSO的论坛(三)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
PDO::prepare讲解
2019/01/29 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
js简单抽奖代码
2015/01/16 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
vue 中几种传值方法(3种)
2019/11/12 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python cumsum函数的具体使用
2019/07/29 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
python实现单机五子棋
2020/08/28 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
银行会计业务的个人自我评价
2013/11/02 职场文书
室内拓展活动方案
2014/02/13 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
vue3获取当前路由地址
2022/02/18 Vue.js