vue中自定义弹出框,vue弹出提示框confirm组件
这篇文章主要为大家详细介绍了某视频剪辑软件自定义弹框，实现确认框、提示框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件自定义弹框效果的具体代码，供大家参考，具体内容如下
1、自定义确认框和提示框
根据传入的类型来判断是确认框或提示框
模板
过渡名称=确认-淡化
div v-if= isshowconfix class= my-confirm @ click。stop= click fun( click cancel )
div class=" confirm-content-wrap " @单击。停止
H3 我的确认标题 v-show=标题文本！={{ titleText }}/h3
p class= my-confirm-content“{ content } }/p
我的操作
div v-if= type=== confirm class= my-cancel-BTN @ click= click fun( click cancel )
p class= my-BTN-text my-border-right { cancel text } }/p
/div
div class=确认-BTN @ click=点击乐趣(点击确认)
p class= my-BTN-text“{确认文本} }/p
/div
/div
/div
/div
/过渡
/模板
脚本类型=text/ecmascript-6
导出默认值{
data () {
返回{
isShowConfirm: false，//用于控制整个窗口的显示/隐藏
标题文本： 操作提示, //提示框标题
内容：说点什么., //提示框的内容
取消文本： 取消, //取消按钮的文字
确认文本： 确认, //确认按钮的文字
键入：确认,//表明弹框的类型：确认-确认弹窗（有取消按钮);警报-通知弹框（没有取消按钮)
outerData: null //用于记录外部传进来的数据，也可以给外部监听用户行为，事件的函数提供判断到底是哪个事件触发的
}
},
方法：{
显示（内容，配置){
this.content=content 说点什么.
如果(对象。原型。托斯特林。call(config)==[Object Object]){
//确保用户传递的是一个对象
这个。标题文本=配置。标题文本
这个。取消文本=配置。取消文本 取消
这个。确认文本=配置。确认文本 确认
this.type=config.type 确认
这个。外部数据=配置。数据 空
}
this.isShowConfirm=true
},
隐藏(){
this.isShowConfirm=false
this.titleText=操作提示
this.cancelText=取消
this.confirmText=确认
this.type=确认
this.outerData=null
},
点击乐趣（类型){
这个emit(userBehavior ，type，this.outerData)
this.hidden()
}
}
}
/脚本
样式范围。我的-确认{
位置：固定；
top:0；
左：0;
右：0;
底部：0;
背景色：rgba(0，0，0，0.5)；
z指数：998;
/* 这里防止当用户长按屏幕，出现的黑色背景色块，以及苹果手机横平时字体的缩放问题*/
-WebKit-text-size-adjust:100%；
-WebKit-tap-highlight-color:rgba(0，0，0，0)；
}
/* 进入和出去的动画*/。确认-淡化-输入-激活{
动画：不透明度0.3秒
}。确认-淡入-激活。确认-内容-包装{
动画：尺度0.3秒
}。确认-淡化-保持激活{
动画：outOpacity 0.2s
}
/* 包裹层容器样式*/。确认-内容-包装{
位置：绝对；
top:28%；
左：0;
右：0;
宽度：280像素
边距：0自动；
背景色：# fff
边框半径：5px
z指数：999;
用户选择：无；
}
/* 顶部标题部分*/。我的确认标题{
padding-top:20px；
文本对齐：居中；
字体大小：20px
字体粗细：500;
颜色：# 333;
}
/* 中间内容部分*/。我的确认内容{
填充：0 15px
padding-top:20px；
边距-底部：32px
文本对齐：居中；
字体大小：16px
颜色：# 666;
行高：1.5;
}
/* 底部按钮样式*/。我的操作{
显示器：flex
border-top:1px solid # eee；
}。我的-手术。我的-取消-btn，1000 .确认-btn {
flex:1；
}。我的-手术。确认-btn {
颜色：# ffb000
}。我的-手术my-btn-text {
文本对齐：居中；
字体大小：16px
边距：8px 0；
填充：6px 0；
}
/* 其他修饰样式*/。我的右边框{
border-right:1px solid # eee；
}
/* 进来的动画*/
@关键帧不透明度{
0% {
不透明度：0;
}
100% {
不透明度：1;
}
}
@关键帧比例{
0% {
transform:scale(0)；
}
60% {
变换：缩放(1.1);
}
100% {
变换：缩放(1);
}
}
/* 出去的动画*/
@关键帧不透明度{
0% {
不透明度：1;
}
100% {
不透明度：0;
}
}
/风格
2、调用：
（1）提示框的使用：
对话框视图ref=我的对话框 @用户行为= changeData /对话框视图
……
//提示框
这个. refs.myDialog.show(内容，{
类型："警报",
确认文本：好，
取消文本： 取消，
标题文本： ,
数据：空
})
效果：
（2）确认框：
这个 refs.myDialog.show(要兑换这个商品么？, {
键入：确认，
确认文本： 立即兑换，
取消文本： 不用了，
标题文本： ,
数据：{shop: shop，operate: exchange}
})
效果：
当为确认框时的按键处理：changeData
对话框视图ref=我的对话框 @用户行为= changeData /对话框视图
……
变更数据(类型，数据){
console.log(changeData ，Data)
if (type===clickConfirm) {
if (data.operate===exchange) {
//this.reduceEnergy(data.shop)
this.exchangeCoupon(data.shop)
} else if(数据。operate===下载){
window.location=data.url
} else if(数据。operate===登录){
这个。uplusapi。upvdnmodule。转到页面({ URL: mpaas://用户中心 })
this.isLogin=false
}
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。