vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
类别:编程学习 浏览量:2742
时间:2022-01-20 00:16:25 vue的弹框怎么用
vue自定义弹框效果确认框、提示框本文实例为大家分享了vue自定义弹框效果的具体代码,供大家参考,具体内容如下
1、自定义确认框和提示框
根据传入的type来判断是确认框或提示框
<template> <transition name="confirm-fade"> <li v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"> <li class="confirm-content-wrap" @click.stop> <h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3> <p class="my-confirm-content">{{ content }}</p> <li class="my-operation"> <li v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')"> <p class="my-btn-text my-border-right">{{ cancelText }}</p> </li> <li class="confirm-btn" @click="clickFun('clickConfirm')"> <p class="my-btn-text">{{ confirmText }}</p> </li> </li> </li> </li> </transition> </template> <script type="text/ecmascript-6"> export default { data () { return { isShowConfirm: false, // 用于控制整个窗口的显示/隐藏 titleText: '操作提示', // 提示框标题 content: 'Say Something ...', // 提示框的内容 cancelText: '取消', // 取消按钮的文字 confirmText: '确认', // 确认按钮的文字 type: 'confirm', // 表明弹框的类型:confirm - 确认弹窗(有取消按钮);alert - 通知弹框(没有取消按钮) outerData: null // 用于记录外部传进来的数据,也可以给外部监听userBehavior,事件的函数提供判断到底是哪个事件触发的 } }, methods: { show (content, config) { this.content = content || 'Say Something ...' if (Object.prototype.toString.call(config) === '[object Object]') { // 确保用户传递的是一个对象 this.titleText = config.titleText || '' this.cancelText = config.cancelText || '取消' this.confirmText = config.confirmText || '确认' this.type = config.type || 'confirm' this.outerData = config.data || null } this.isShowConfirm = true }, hidden () { this.isShowConfirm = false this.titleText = '操作提示' this.cancelText = '取消' this.confirmText = '确认' this.type = 'confirm' this.outerData = null }, clickFun (type) { this.$emit('userBehavior', type, this.outerData) this.hidden() } } } </script> <style scoped> .my-confirm { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 998; /* 这里防止当用户长按屏幕,出现的黑色背景色块,以及 iPhone 横平时字体的缩放问题 */ -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 进入和出去的动画 */ .confirm-fade-enter-active { animation: opacity 0.3s; } .confirm-fade-enter-active .confirm-content-wrap { animation: scale 0.3s; } .confirm-fade-leave-active { animation: outOpacity 0.2s; } /* 包裹层容器样式 */ .confirm-content-wrap { position: absolute; top: 28%; left: 0; right: 0; width: 280px; margin: 0 auto; background-color: #fff; border-radius: 5px; z-index: 999; user-select: none; } /* 顶部标题部分 */ .my-confirm-title { padding-top: 20px; text-align: center; font-size: 20px; font-weight: 500; color: #333; } /* 中间内容部分 */ .my-confirm-content { padding: 0 15px; padding-top: 20px; margin-bottom: 32px; text-align: center; font-size: 16px; color: #666; line-height: 1.5; } /* 底部按钮样式 */ .my-operation { display: flex; border-top: 1px solid #eee; } .my-operation .my-cancel-btn, .confirm-btn { flex: 1; } .my-operation .confirm-btn { color: #ffb000; } .my-operation .my-btn-text { text-align: center; font-size: 16px; margin: 8px 0; padding: 6px 0; } /* 其他修饰样式 */ .my-border-right { border-right: 1px solid #eee; } /* 进来的动画 */ @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scale { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } /* 出去的动画 */ @keyframes outOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } </style>
2、调用:
(1)提示框的使用:
<DialogView ref="myDialog" @userBehavior="changeData"></DialogView> …… //提示框 this.$refs.myDialog.show(content, { type: 'alert', confirmText: 'OK', cancelText: '取消', titleText: '', data: null })
效果:
(2)确认框:
this.$refs.myDialog.show('要兑换这个商品么?', { type: 'confirm', confirmText: '立即兑换', cancelText: '不用了', titleText: '', data: {shop: shop, operate: 'exchange'} })
效果:
当为确认框时的按键处理:changeData
<DialogView ref="myDialog" @userBehavior="changeData"></DialogView> …… changeData (type, data) { console.log('changeData',data) if (type === 'clickConfirm') { if (data.operate === 'exchange') { // this.reduceEnergy(data.shop) this.exchangeCoupon(data.shop) } else if (data.operate === 'downLoad') { window.location = data.url } else if (data.operate === 'login') { this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'}) this.isLogin = false } } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vuevlog制作软件(Vue实现Dialog封装)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
热门推荐
- 聚集索引和非聚集索引的区别有哪些
- docker容器临时网络连接(Docker与iptables及实现bridge方式网络隔离与通信操作)
- sql server 货币型例子(sql server把退款总金额拆分到尽量少的多个订单中详解)
- html如何给table加边框(HTML table 表格边框的实现思路)
- 护卫神主机大师教程(护卫神主机大师Linux登录账户密码忘记的解决办法)
- SQL中的@@Error的使用
- mysqlsource命令作用(MySQL source命令的使用简介)
- nginx给需要转发的链接添加参数(Nginx 根据URL带的参数转发的实现)
- 怎么搭建个人云服务器(怎么使用云服务器搭建个人网站?)
- 安装SQL Server 2016出错提示:需要安装oracle JRE7 更新 51(64位)或更高版本问题的解(安装SQL Server 2016出错提示:需要安装oracle JRE7 更新 5164位或更高版本问题的解)