vue的确认弹框加格式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的确认弹框加格式相关的知识，希望对你有一定的参考价值。
百度知道vue的确认弹框加格式
亦有五星光耀辰
1。自定义确认框和提示框
根据传入的type来判断是确认框或提示框
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap" @click.stop>
<h3 class="my-confirm-title" v-show="titleText != ''"> titleText </h3>
<p class="my-confirm-content"> content </p>
<div class="my-operation">
<div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
<p class="my-btn-text my-border-right"> cancelText </p>
</div>
<div class="confirm-btn" @click="clickFun('clickConfirm')">
<p class="my-btn-text"> confirmText </p>
</div>
</div>
</div>
</div>
</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>
调用：
（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
,
补充：
点击空白页，关闭弹窗：
在最外层的div上，加上
@click.stop="clickFun('clickCancel')"
在它的内层div上加上
@click.stop
clickFun函数：
clickFun ()
// this.$emit('userBehavior', type, this.outerData)
this.hidden()
,
代码：
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap1" :style="'width': osType=='ios'?'78%':'297px'" @click.stop>
………………
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
export default
name: "NoticeDialog",
data ()
return
isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
titleText: '天天收能量，福利享不停', // 提示框标题
content: 'Say Something ...', // 提示框的内容
outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior
,
methods:
……
hidden ()
this.isShowConfirm = false
this.titleText = '操作提示'
this.outerData = null
,
clickFun ()
this.hidden()
,
……
</script>
文章知识点与官方知识档案匹配
Vue入门技能树Node.js和npmNode安装与配置
22313 人正在系统学习中
打开CSDN，阅读体验更佳
Vue 自定义模态对话框弹窗_mossbaoo的博客_vue弹出模态...
Vue 自定义模态对话框弹窗 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template> <viewclass="app-container"> <modal-dialogshowText="确定要取消收藏吗?":isShowDialog="isDialog"@cancel="isDialog = false"@confirm="confir...
Vue3.0实现自定义Message提示框_林卤蛋的博客_vue3提示框
学习vue3.0的时候想到了,能不能自己写一个自定义的类似于element ui的this.$message的消息提示框,网上有很多是基于vue2.0的自定义提示框,那么我就来搞一个3.0版本的吧。 实现步骤 1. 创建MessageMain.vue <template><Transition name=...
vue-dialog:vue自定义弹窗组件（含回调）
具体参考博客：
使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装： 实现动态传入内容，实现取消，确认等回调函数。 首先写一个基本的弹窗样式，如上图所示。 在需要用到弹窗的地方中引入组件： import dialogBar from './dialog.vue' components: 'dialog-bar': dialogBar, , 点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值：v-model="sendVal"，sendVal初始值为false。 在打开弹窗的方法中赋值： openMask()
ant-vue通知提醒框（ Notification ）实现自定义样式
需求：运用ant中通知提醒实现自定义的样式效果； 效果如下：点我之后点击上传按钮去看效果 组件自定义内容支持vueNode |function(h)，我自己是用function(h)来实现的，想用vueNode的 可以去vue 官网去查看 相应的编码规范，function（h）的其中核心有点像广度遍历似的，大家可以先将要实现的代码先写出来之后再用function(h) 来实现 更高效： 我不知道怎么绑定指令，问我的狗子 他也不知道，真希望有高人指点一番！！！ h( '页面标签
继续访问

vue封装带确定、取消按钮的弹窗和提示组件，可用promise回调
vue封装带确定和取消的全局弹窗组件，支持promise回调，任意组件之间调用方法
继续访问
vue2 确认框 MessageBox 弹框 删除确认取消
项目需要删除时弹出确认框 需求是项目完成80%时提出的 再添加弹出框的话 耗时耗力 所于是就有了封装好的弹窗函数挂载到Vue的原型上 在项目里面可以直接 this. 调用 显著提升摸鱼时间 话不多说 看代码 第一步 在 utils 创建一个名叫 MessageBox.js 的文件 把代发复制进去 ↓↓↓ 代码 ↓↓↓ /** * ********************** * @MessageBox true : 引入element的弹出框 * @confirmButtonTex
继续访问
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数，并根据选择列进行展示： 点击勾选之后改变列表展示列 html: <div id="app"> <template> <el-popover placement="right" width="800" trigger="click" style="margin-left:80%"> <el-checkbox-group v-model="colOptions"> <el-checkbox v-for
继续访问
vue项目自定义提示框
<!-- 弹框 --> <template> <div :visible="visible" ref="tipsBox" @update:visible="updateDialog" class="tipsBox"> <div ref="showPopover" class="tipsClass animated"> <...
继续访问
Vue中的确认提示框
弹出确认框 this.$confirm("是否确认标记为作废?", "提示", iconClass: "el-icon-question", //自定义图标样式 confirmButtonText: "确认", //确认按钮文字更换 cancelButtonText: "取消", //取消按钮文字更换 showClose: true, //是否显示右上角关闭按钮 type: "warning", //提示类型 succes
继续访问
vue自定义弹窗
vue自定义弹窗
继续访问

vue自定义组件+Dialog 对话框组件定制弹出框教程（转载）
1、新建一个.vue页面，写一个Dialog组件、把弹出框上想要展示的内容放进去。 <template> <el-dialog title="新增标签" :visible.sync="centerDialogVisible" width="80%" center> <div> <!-- 这个div放置内容 --> </div> </el-dialog> </templat
继续访问
Vue 自定义一个全局弹框组件
前文：其实element ui有提供this.$mesage和this.$notify弹框组件可供使用，但是我们的ui设计的样式以及布局还是不完全一样的，为了达到100%的呈现效果，所以自己写了一个全局组件，然后在页面上直接this.$popupMessage()调用 首先，需要创建一个vue文件来写我们的弹框样式，新建PopupMessage.vue <template> <div class="popup-message warning"> <div cl...
继续访问

vue实现按钮弹框【弹出图片、视频、表格、表单等】
vue实现弹框【弹视频、图片、表单、表格等】总之，你想弹啥就弹啥。一💫
继续访问

Vue实战篇八：实现弹出对话框进行交互
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
继续访问

运算符（逻辑或||）和（逻辑与&&）和括号的优先级
运算符（逻辑或||）和（逻辑与&&）和括号的优先级 首先他们的优先级为：括号 >（逻辑&&）>（逻辑或||） 来个例子： return a&&b||c // 根据a来判断，当a值为true，则返回b，当a值为false，则返回c return a||b&&c //根据优先级先算b&&c，然后在和a或（||）， //如果b为false，那么b&&c返回false，此时相当于return a||false
继续访问
VUE：自己写一个消息提示弹框（类似element-ui的message）
项目中的3D模块操作时，需要提示用户的一些不正确操作，但是又想多一个不再提示的按钮。百度资料并仿照element-ui的message消息提示，写了一个组件方法，效果图如下。
继续访问

布尔操作符：逻辑或 （||）、逻辑与（&&）、逻辑非（！）
逻辑或 （||）、逻辑与（&&）、逻辑非（！） 逻辑非操作符遵循下列规则： “”、0、NaN、null、undefined 转换成布尔值是false，其余转换成布尔值为true。 逻辑非把前面的值取反即可； ！取反操作；因为js有数据，数据有真假，所以可以进行转化取反； ！！两个逻辑非操作符，就是直接将数据转换成布尔值； 逻辑或：
继续访问
Vue()-常用组件之自定义弹框layer
Vue利用layer进行自定义弹窗（依赖jquery和layer，不知道怎么引入的，看我之前的文章）
继续访问
vue 自定义弹框的用法
vue 自定义弹框的用法 一、$prompt 的用法 console.log('驳回的参数',list); this.$prompt('', '战败驳回原因', inputType: 'textarea', confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /\S/, inputErrorMessage: '驳回原因不能为空',
继续访问
最新发布 Vue确认框和弹出框对比实现
Vue确认框和弹出框对比实现 如果是要有选择，使用确认框如果只是简单的提示，用弹出框。
继续访问
vue弹出自定义对话框
vue
css
写评论

回答于 2022-12-21
抢首赞
客如云餐饮管理系统价格-各类潮流单品，尽在淘宝热卖，快来选购!

客如云收银重装系统 变更账号 会员营销高级版 小程序2.0扫码点餐
￥299 元

客如云餐饮纯收银系统PC和安卓双端版 平板扫码点餐会员 外卖自配
￥999 元

客如云红云餐饮收银机一体机奶茶扫码点餐便利超市饭店烧烤水果称重触摸屏收款机点菜美团外卖接单机系统软件
￥1699 元

客如云收银机一体机超市餐饮收银机饭店收银机火锅店水果称重扫码点餐机美团外卖收银系统管理一体机 收款机
￥1699 元

收银系统软件酒吧称重茶饮扫码点餐母婴餐饮超市零售智能中餐快餐
￥150 元
simba.taobao.com广告
国际 学校北京诺德安达精英教育典范
诺德安达双语学校，中国国家课程与IBDP/A-level 项目结合，国际背景师资，高品质寄宿;国际 学校诺德安达双语学校，中国国家课程+A-level或IB项目，国际师资，寄宿走读均可
本月13人已申请相关服务
咨询
NORDANGLIAEDUCATIONLIMITED广告
更多专家
vue的确认弹框加格式
专家1对1在线解答问题
5分钟内响应 | 万名专业答主
马上提问
最美的花火 咨询一个电子数码问题，并发表了好评
lanqiuwangzi 咨询一个电子数码问题，并发表了好评
garlic 咨询一个电子数码问题，并发表了好评
188****8493 咨询一个电子数码问题，并发表了好评
篮球大图 咨询一个电子数码问题，并发表了好评
动物乐园 咨询一个电子数码问题，并发表了好评
AKA 咨询一个电子数码问题，并发表了好评
— 为你推荐更多精彩内容 —
用鸡翅做麻辣香锅，怎样处理鸡翅，肉嫩菜香炒一锅，吃不够呢？
视频回答
安然761
回答于 2022-11-09
49点赞0浏览
【洁净全屋】无线充电款吸尘器家用大吸力大功率小型家用强力室内
￥194.4 元￥194.4 元
购买
simba.taobao.com广告
海尔（Haier） 吸尘器家用卧式 大功率强劲吸力 多功能一键收线一键倒尘多重过滤吸尘机 HZW1207【中国红】
￥279 元￥279 元
购买
京东广告
网赌流水3000万被判十五年
视频回答
杜晓霞律师
回答于 2022-03-29
273点赞1,836浏览
陈凯歌不再隐瞒说出和倪萍两人分手的原因，很多网友并不买账，咋回事？
提到陈凯歌，我们第一个想到的应该是著名导演了吧，但是你能想象到一个这么有名气的导演，背后却有很多人在
娱人娱乐i
回答于 2022-08-22
1点赞3,361浏览
吸尘器吸尘-逛京东，爆款好物，新人专享!
值得一看的吸尘器相关信息推荐
北京京东世纪信息技术广告
梅德韦杰夫：新加入俄罗斯的领土可用核武器进行防御，背后透露了哪些信息？
在俄乌军事冲突期间，梅德韦杰夫作为现任俄罗斯联邦安全会议副主席，频繁高调露面让人难免会产生诸多联想，
毒舌酸果
回答于 2022-09-23
2点赞2评论
广西男子双色球中2.19亿捐500万，买了共计160元，这是什么运气？
广西男子双色球中了2.19亿捐了500万，买了总共计160元，这是什么运气？可以说他购买了160块钱
小白知识之窗
回答于 2022-10-26
2,894浏览3评论
批发吸尘器5500W业吸尘器酒店宾馆工厂缝隙干湿两用吸水大功率
￥2680 元￥2680 元
购买
1688广告
正在加载
全部 参考技术A 1。自定义确认框和提示框
根据传入的type来判断是确认框或提示框
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap" @click.stop>
<h3 class="my-confirm-title" v-show="titleText != ''"> titleText </h3>
<p class="my-confirm-content"> content </p>
<div class="my-operation">
<div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
<p class="my-btn-text my-border-right"> cancelText </p>
</div>
<div class="confirm-btn" @click="clickFun('clickConfirm')">
<p class="my-btn-text"> confirmText </p>
</div>
</div>
</div>
</div>
</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>
调用：
（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
,
补充：
点击空白页，关闭弹窗：
在最外层的div上，加上
@click.stop="clickFun('clickCancel')"
在它的内层div上加上
@click.stop
clickFun函数：
clickFun ()
// this.$emit('userBehavior', type, this.outerData)
this.hidden()
,
代码：
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap1" :style="'width': osType=='ios'?'78%':'297px'" @click.stop>
………………
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
export default
name: "NoticeDialog",
data ()
return
isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
titleText: '天天收能量，福利享不停', // 提示框标题
content: 'Say Something ...', // 提示框的内容
outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior
,
methods:
……
hidden ()
this.isShowConfirm = false
this.titleText = '操作提示'
this.outerData = null
,
clickFun ()
this.hidden()
,
……
</script>
文章知识点与官方知识档案匹配
Vue入门技能树Node.js和npmNode安装与配置
22313 人正在系统学习中
打开CSDN，阅读体验更佳
Vue 自定义模态对话框弹窗_mossbaoo的博客_vue弹出模态...
Vue 自定义模态对话框弹窗 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template> <viewclass="app-container"> <modal-dialogshowText="确定要取消收藏吗?":isShowDialog="isDialog"@cancel="isDialog = false"@confirm="confir...
Vue3.0实现自定义Message提示框_林卤蛋的博客_vue3提示框
学习vue3.0的时候想到了,能不能自己写一个自定义的类似于element ui的this.$message的消息提示框,网上有很多是基于vue2.0的自定义提示框,那么我就来搞一个3.0版本的吧。 实现步骤 1. 创建MessageMain.vue <template><Transition name=...
vue-dialog:vue自定义弹窗组件（含回调）
具体参考博客：
使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装： 实现动态传入内容，实现取消，确认等回调函数。 首先写一个基本的弹窗样式，如上图所示。 在需要用到弹窗的地方中引入组件： import dialogBar from './dialog.vue' components: 'dialog-bar': dialogBar, , 点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值：v-model="sendVal"，sendVal初始值为false。 在打开弹窗的方法中赋值： openMask()
ant-vue通知提醒框（ Notification ）实现自定义样式
需求：运用ant中通知提醒实现自定义的样式效果； 效果如下：点我之后点击上传按钮去看效果 组件自定义内容支持vueNode |function(h)，我自己是用function(h)来实现的，想用vueNode的 可以去vue 官网去查看 相应的编码规范，function（h）的其中核心有点像广度遍历似的，大家可以先将要实现的代码先写出来之后再用function(h) 来实现 更高效： 我不知道怎么绑定指令，问我的狗子 他也不知道，真希望有高人指点一番！！！ h( '页面标签
继续访问

vue封装带确定、取消按钮的弹窗和提示组件，可用promise回调
vue封装带确定和取消的全局弹窗组件，支持promise回调，任意组件之间调用方法
继续访问
vue2 确认框 MessageBox 弹框 删除确认取消
项目需要删除时弹出确认框 需求是项目完成80%时提出的 再添加弹出框的话 耗时耗力 所于是就有了封装好的弹窗函数挂载到Vue的原型上 在项目里面可以直接 this. 调用 显著提升摸鱼时间 话不多说 看代码 第一步 在 utils 创建一个名叫 MessageBox.js 的文件 把代发复制进去 ↓↓↓ 代码 ↓↓↓ /** * ********************** * @MessageBox true : 引入element的弹出框 * @confirmButtonTex
继续访问
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数，并根据选择列进行展示： 点击勾选之后改变列表展示列 Html: <div id="app"> <template> <el-popover placement="right" width="800" trigger="click" style="margin-left:80%"> <el-checkbox-group v-model="colOptions"> <el-checkbox v-for
继续访问
vue项目自定义提示框
<!-- 弹框 --> <template> <div :visible="visible" ref="tipsBox" @update:visible="updateDialog" class="tipsBox"> <div ref="showPopover" class="tipsClass animated"> <...
继续访问
Vue中的确认提示框
弹出确认框 this.$confirm("是否确认标记为作废?", "提示", iconClass: "el-icon-question", //自定义图标样式 confirmButtonText: "确认", //确认按钮文字更换 cancelButtonText: "取消", //取消按钮文字更换 showClose: true, //是否显示右上角关闭按钮 type: "warning", //提示类型 succes
继续访问
vue自定义弹窗
vue自定义弹窗
继续访问

vue自定义组件+Dialog 对话框组件定制弹出框教程（转载）
1、新建一个.vue页面，写一个Dialog组件、把弹出框上想要展示的内容放进去。 <template> <el-dialog title="新增标签" :visible.sync="centerDialogVisible" width="80%" center> <div> <!-- 这个div放置内容 --> </div> </el-dialog> </templat
继续访问
Vue 自定义一个全局弹框组件
前文：其实element ui有提供this.$mesage和this.$notify弹框组件可供使用，但是我们的ui设计的样式以及布局还是不完全一样的，为了达到100%的呈现效果，所以自己写了一个全局组件，然后在页面上直接this.$popupMessage()调用 首先，需要创建一个vue文件来写我们的弹框样式，新建PopupMessage.vue <template> <div class="popup-message warning"> <div cl...
继续访问

vue实现按钮弹框【弹出图片、视频、表格、表单等】
vue实现弹框【弹视频、图片、表单、表格等】总之，你想弹啥就弹啥。一💫
继续访问

Vue实战篇八：实现弹出对话框进行交互
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
继续访问

运算符（逻辑或||）和（逻辑与&&）和括号的优先级
运算符（逻辑或||）和（逻辑与&&）和括号的优先级 首先他们的优先级为：括号 >（逻辑&&）>（逻辑或||） 来个例子： return a&&b||c // 根据a来判断，当a值为true，则返回b，当a值为false，则返回c return a||b&&c //根据优先级先算b&&c，然后在和a或（||）， //如果b为false，那么b&&c返回false，此时相当于return a||false
继续访问
VUE：自己写一个消息提示弹框（类似element-ui的message）
项目中的3D模块操作时，需要提示用户的一些不正确操作，但是又想多一个不再提示的按钮。百度资料并仿照element-ui的message消息提示，写了一个组件方法，效果图如下。
继续访问

布尔操作符：逻辑或 （||）、逻辑与（&&）、逻辑非（！）
逻辑或 （||）、逻辑与（&&）、逻辑非（！） 逻辑非操作符遵循下列规则： “”、0、NaN、null、undefined 转换成布尔值是false，其余转换成布尔值为true。 逻辑非把前面的值取反即可； ！取反操作；因为js有数据，数据有真假，所以可以进行转化取反； ！！两个逻辑非操作符，就是直接将数据转换成布尔值； 逻辑或：
继续访问
Vue()-常用组件之自定义弹框layer
Vue利用layer进行自定义弹窗（依赖jquery和layer，不知道怎么引入的，看我之前的文章）
继续访问
vue 自定义弹框的用法
vue 自定义弹框的用法 一、$prompt 的用法 console.log('驳回的参数',list); this.$prompt('', '战败驳回原因', inputType: 'textarea', confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /\S/, inputErrorMessage: '驳回原因不能为空',
继续访问
最新发布 Vue确认框和弹出框对比实现
Vue确认框和弹出框对比实现 如果是要有选择，使用确认框如果只是简单的提示，用弹出框。
继续访问
vue弹出自定义对话框
vue
css
写评论
 参考技术B 1。自定义确认框和提示框
根据传入的type来判断是确认框或提示框
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap" @click.stop>
<h3 class="my-confirm-title" v-show="titleText != ''"> titleText </h3>
<p class="my-confirm-content"> content </p>
<div class="my-operation">
<div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
<p class="my-btn-text my-border-right"> cancelText </p>
</div>
<div class="confirm-btn" @click="clickFun('clickConfirm')">
<p class="my-btn-text"> confirmText </p>
</div>
</div>
</div>
</div>
</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>
调用：
（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
,
补充：
点击空白页，关闭弹窗：
在最外层的div上，加上
@click.stop="clickFun('clickCancel')"
在它的内层div上加上
@click.stop
clickFun函数：
clickFun ()
// this.$emit('userBehavior', type, this.outerData)
this.hidden()
,
代码：
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap1" :style="'width': osType=='ios'?'78%':'297px'" @click.stop>
………………
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
export default
name: "NoticeDialog",
data ()
return
isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
titleText: '天天收能量，福利享不停', // 提示框标题
content: 'Say Something ...', // 提示框的内容
outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior
,
methods:
……
hidden ()
this.isShowConfirm = false
this.titleText = '操作提示'
this.outerData = null
,
clickFun ()
this.hidden()
,
……
</script> 参考技术C vue的确认弹框加格式
confirmText: '确认', // 确认按钮的文字 type: 'confirm', // 表明弹框的类型:confirm - 确认弹窗(有取消按钮);alert - 通知弹框(没有取消按钮) outerData: null // 用于记录外部传进来的数据,也可以给外部监听userBehavior,事件的函数提供 参考技术D 先在vue项目的入口文件man.js里面import layer的css和js相关文件，可将layer设置为vue里的函数对象 vue.layer = vue.prototype.$layer = layer
在组件里面用this.$layer
以上是关于vue的确认弹框加格式的主要内容，如果未能解决你的问题，请参考以下文章