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 } } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue怎么引入axios(如何用vue封装axios请求)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue-router的安装(详解Vue-Router的安装与使用)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vuefor指令使用教程(Vue必学知识点之forEach的使用)
- vue是怎样进行页面跳转(Vue实现登陆跳转)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
- 新一小兰领衔 盘点动漫中的那些 远距离恋爱情侣(盘点动漫中的那些)
热门推荐
- 云服务器选择七个原则(如何选择一个好的云服务器?)
- docker进入redis容器(Docker配置redis哨兵模式的方法多服务器上)
- jQuery中$.each的用法
- docker容器如何更改tomcat端口(Docker方式启动tomcat访问首页出现404错误)
- javascript文件解压(JavaScript 如何在线解压 ZIP 文件)
- php开发模式有哪些(PHP设计模式之简单工厂和工厂模式实例分析)
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产(CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产)
- html结合css实现简单网页(基于HTML+CSS实现网页滑动门效果)
- nginxmac启动脚本(Mac M1 Nginx 配置多站点的实现)
- css选择器一般写多少(深入理解CSS选择器优先级)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9