vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装:
实现动态传入内容,实现取消,确认等回调函数。
首先写一个基本的弹窗样式,如上图所示。
在需要用到弹窗的地方中引入组件:
import dialogBar from './dialog.vue'
components:{
'dialog-bar': dialogBar,
},
点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示
在弹窗组件中定义一个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:
可以运用vue的数据双向绑定,更换title,content。
在dialog.vue中获取内容:
props: {
value: {},
content: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
},
我们可以运用同样的原理来获取不同按钮中的自定名称。
下面我们利用传入的不同type来确定不同的按钮,并提供不同的回调函数。
如传入type为danger,我们可以在dialog.vue中props获取type,并定义一个如下按钮:
{{dangerText}}
dangerBtn(){
this.$emit('danger'); // 发送一个danger事件作为回调函数
this.closeMask(); // 关闭弹窗
},
在标签中定义danger的回调并做一些操作:
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: '删除'
},
},
{{cancelText}}
{{dangerText}}
{{confirmText}}
总结
以上所述是小编给大家介绍的使用vue实现各类弹出框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
时间: 2019-07-01
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件相关推荐
- 小程序确定取消弹窗_小程序开发之弹出框
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...
- vue点击input框出现弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
- python selenium 处理弹窗_转:python selenium 弹出框处理的实现
show alert show confirm show prompt
- vue弹出框组件封装
新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue<template><div class="mack" ...
- lhgdialog弹出框组件 参数详解(自己曾经开发的fuzz项目中用到过)
lhgdialog弹出框组件 参数详解 鸣谢:http://blog.csdn.net/hurryjiang/article/details/7657623 同文:http://wjch-111.it ...
- 微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框 模态弹窗 操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...
- 【Popover 弹出框】在vue中,ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法
通过 /deep/ 深层查找并不能找到相关的元素,查找原因发现此组件的样式是全局样式,如果你style中加了scoped,如<style lang="scss" scoped ...
- android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框
前言 用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理 HTML 元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为 Canvas 使用的是另外 ...
- vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现
前言 最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文 ...
最新文章
- python—多线程之死锁
- 基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理
- 用字符串表达式访问JSON数据(java,fastjson)
- IO与NIO –中断,超时和缓冲区
- python 计算协方差矩阵_opencv2学习:计算协方差矩阵
- php判断版本号大小,通用javascript代码判断版本号是否在版本范围之间_javascript技巧...
- WDS部署服务所用的PXE引导文件
- DirectFB简介以及移植[一]【转】
- java中遍历Map几种方法
- java更改管理员的密码_java-第十章-类和对象-更改管理员密码
- eureka集群 ha_SpringCloud如何实现Eureka集群、HA机制-百度经验
- MASM5.0下载安装与运行第一个HelloWorld
- python 广义线性模型_SPSS广义线性模型:广义估计方程
- OpenMV自学笔记
- 关于ROS+Gazebo通过cmd_vel或键盘控制节点发布速度消息时,仿真小车运动速度相反问题
- 叶蔬菜种子行业调研报告 - 市场现状分析与发展前景预测
- 微信小程序:独家全新娱乐性超高的喝酒神器
- AI智能抠图工具--头发丝都可见
- The tomcat server configuration at /sever/tomcat v9.0 localhost-config is.......错误解析
- 使用gdal的ogr创建shapefile文件(c++)
热门文章
- 最新.NET 5.0 C#6 MVC6 WCF5 NoSQL Azure开发120课视频
- R读写Excel文件中数据的方法
- WebRequest msdn整理
- java设计模式(八) 适配器模式
- DAX/PowerBI系列 - 玩转阿里云 Alicloud Pricing
- oracle 的“+”和“,”连接表的方式
- 阿里研究院:解读互联网经济十大议题
- win10个人壁纸默认保存位置
- qt下调用win32api 修改分辨率
- 大脑遗忘与数据结构中的对列相似