vue 弹窗组件,vue自定义模态框组件
页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，下面这篇文章主要给大家介绍了关于某视频剪辑软件实现自定义模态弹窗组件的相关资料，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
前言效果图实例代码总结
前言
对话框是很常用的组件，在很多地方都会用到，一般我们可以使用自带的警报来弹出对话框，但是假如是设计出的图该怎么办呢，所以我们需要自己写一个对话框，下面来一起看看详细的实现过程。
效果图
以上截图，红色边框部分，表示"文字、图标或者图片"是可更改部分
实例代码
一、创建弹窗组件退出对话框。某视频剪辑软件组件
模板
过渡组名称=淡化
！-退出弹窗-
div class=退出对话框
key=1
@click=isQuit=false
v-if=isQuit
@touchmove.prevent
/div
div class=quit_box
v-show=isQuit
key=2
img :src=imgUrl
:alt=imgLoadTip
div class= quit _ title“{ title } }/div
p{{content}}/p
button class= quit _ BTN @ click=左键单击 { BTN文本} }/button
button class= quit _ close @ click=右击“{ right text } }/button
/div
/过渡-组
/模板
脚本
导出默认值{
名称：弹出式菜单，
data () {
返回{
isQuit: false，
imgUrl: ，
标题： ,
内容： ,
btnText:" "，
右文本：""
}
},
方法：{
左键单击(){
this.leftBtn()
this.isQuit=false
},
右键单击(){
this.rightBtn()
this.isQuit=false
}
}
}
/脚本
样式lang=scss 范围
//退出弹窗。淡入，淡化-保持活动状态{
不透明度：0;
}。淡入激活，淡化-保持活动状态{
过渡：不透明度0.35秒
}
//全局弹窗。退出_对话框{
背景：rgba(0，0，0，5);
位置：固定；
top:0；
左：0;
身高：100%;
宽度：100%;
z指数：10000;
}。quit_box {
宽度：700像素
背景：# fff
位置：固定；
top:50%；
左：50%;
左边距：-350 px；
边距-top:-190 px；
z指数：10001;
边框半径：10px
文本对齐：居中；
填充：50px
img{
宽度：80px
}。quit_title{
颜色：# 666;
字体大小：28px
边距：45px 0px
}
按钮{
边框半径：32px
填充：20px 0px
字体大小：26px
边框半径：8px
宽度：214px
}。quit_btn{
颜色：# 03BA82
背景：# fff
边框：1px纯色# 03BA82
右边距：32px
}。退出_关闭{
背景：线性梯度(0度、#03BA82、# 01d 695)；
盒影：0px 3px 4px 0px rgba(1，84，58，0.27)；
边框：1px纯色# 03BA82
颜色：# fff
}
}
/风格
二、创建graspDialog.js
从“vue”导入某视频剪辑软件
导入抓取自./组件/退出对话框/退出对话框
const PopupBox=Vue.extend(Grasp)
Grasp.install=function (data) {
let instance=new PopupBox({
数据
}).$mount()
document.body.appendChild(实例100万美元)
Vue.nextTick(()={
instance.isQuit=true
//isQuit和弹窗组件里的isQuit对应，用于控制显隐
})
}
导出默认抓取
三、在全局主页。射流研究…引入
从“vue”导入某视频剪辑软件
从导入弹出窗口 api/quitDialog
vue。原型。$ popup=popup。安装
四、页面中调用，只需在函数中调用即可
方法：{
graspBtn () {
这个. grasp({
imgUrl:要求(././assets/home/quits.png )，//顶部图片。
imgLoadTip:图片加载中.,
内容： 温馨提示，
标题： 注意：该学习任务未完成，是否确认退出，
btnText:残忍退出，
右文本： 继续学习，
//左边点击事件
leftBtn: ()={
这个. store.dispatch(用户/注销)。然后(()={
这个。$signalr。LogoutPad()
这个。$signalr。SendMsg(2，0，“退出系统”)
这个。$router.push(/login )
})
},
//点击右边的事件
rightBtn: ()={}
})
}
}
总结
这就是这篇关于vue实现自定义“模态弹出”组件的文章。有关vue自定义“模态弹出”组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。