vue 实现一个简单的全局调用弹窗案例

2023-07-16 22:22:03 170

1.实现效果图

2.第一步，新建一个.vue文件定义一个弹框的基本模板

style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里，样式是用less写的，需要你的项目引入less

注意：我这里的组件右上角关闭是一张图片需要换成你自己本地的路径

3.定义一个js文件

importVuefrom'vue';
importAlertfrom'@/components/public/alertModal';//引入刚才写的弹框组件
letAlertConstructor=Vue.extend(Alert);//返回一个“扩展实例构造器”

letAlertModal=(o)=>{
letalertDom=newAlertConstructor({
el:document.createElement('div');//将Alert组件挂载到新创建的div上
})
document.body.appendChild(alertDom.$el);//把Alert组件的dom添加到body里

//标题
alertDom.title=o.title||'信息';
//单条内容
alertDom.content=o.content;
//关闭按钮
alertDom.cancelBtn=o.cancelBtn;

//弹框三个事件右上角关闭确定取消
alertDom.a_close=o.close||null;
alertDom.a_confirm=o.confirm||null;
alertDom.a_cancel=o.cancel||null;

}
exportdefaultAlertModal;

4.mian.js

importalertfrom'@/common/alertModal'//这里引入的是js文件

Vue.prototype.$alert=alert;

5.在任意组件调用

取消按钮开启

调用之后是往body添加元素

5.通过window.alertIsShow，给window增加一个属性，来控制一个页面只会出现一个弹框

methods:{
operate(){
if(!window.alertIsShow){
//弹框模板有个deletewindow.alertIsShow是为了弹框关闭之后能再次显示
this.$alert({
title:'信息',
content:'登入成功！',
cancelBtn:true,
close(){
//这里执行点击右上角需要做的事，默认执行关闭弹框
},
confirm(){
//这里执行点击确定按钮需要做的事，默认执行关闭弹框
},
cancel(){
//这里执行点击取消按钮需要做的事，默认执行关闭弹框
}
})
window.alertIsShow=true;
}
}
}

6.最后是弹框组件的less样式


#tip_alertModal{
position:fixed;
left:0;
top:0;
z-index:100;
width:100%;
height:100%;

.t-alert-mask{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.3);
}

.t-alert-container{
position:absolute;
top:50%;
left:50%;
min-width:240px;
max-width:400px;
height:auto;
background-color:#fff;
transform:translate(-50%,-50%);
border-radius:4px;

.t-alert-title{
position:relative;
width:100%;
height:40px;
line-height:40px;
background-color:rgba(115,134,255,1);
border-radius:4px4px0px0px;

span{
position:absolute;
top:50%;
left:10px;
font-weight:500;
font-size:16px;
color:#fff;
transform:translate(0,-50%);
}

img{
position:absolute;
top:50%;
right:10px;
transform:translate(0,-50%);
cursor:pointer;
}
}

.t-alert-content{
text-align:center;
span{
font-family:PingFangSC-Regular;
font-weight:400;
font-size:14px;
color:rgba(51,51,51,1);
}

span.content-text{
display:inline-block;
width:100%;
height:auto;
font-weight:400;
font-size:14px;
color:#333;
padding:20px18px;
}
.t-content-list{
min-width:320px;
height:auto;
text-align:left;
.list-title{
position:relative;
padding:10px010px10px;
img{
display:inline-block;
position:absolute;
width:20px;
margin-right:10px;
}
span{
display:inline-block;
vertical-align:middle;
padding-left:31px;
}
}
.list-content{
width:100%;
height:auto;
ul{
padding-bottom:10px;
li{
width:100%;
height:auto;
padding-bottom:10px;
span{
vertical-align:top;
}
span.title{
display:inline-block;
padding-left:41px;
padding-right:3px;
text-align:left;
}
}
}
}
}
}

.t-alert-confirm{
width:100%;
padding-bottom:17px;
text-align:center;

button{
display:inline-block;
width:80px;
height:36px;
border:none;
background:rgba(115,134,255,1);
font-weight:400;
font-size:16px;
color:#fff;
border-radius:4px;
outline:none;
cursor:pointer;
}
.cancel-btn{
margin-left:20px;
background:rgba(151,193,234,1);
font-family:PingFangSC-Regular;
font-weight:400;
font-size:16px;
color:rgba(255,255,255,1);
}
}
}
}

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

补充知识：Vue注册全局组件-弹窗组件

在src目录下新建components文件夹

1.新建module文件夹，然后新建v-alert.vue


.v-alert{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:2000;
.alert-wrap{
top:0;
left:0;
width:100%;
height:100%;
/*z-index:2000;*/
}
.v-cont{
min-width:100px;
min-height:100px;
background-color:#ffffff;
position:relative;
border-radius:2px;
.shadow{
box-shadow:02px30pxrgba(42,47,59,0.2);
}
z-index:2001;
.title{
width:100%;
line-height:70px;
color:#ffffff;
padding-left:30px;
}
.title-data{
color:#f8e19a;
}
.content{
padding:40px;
/*padding:60px40px50px40px;*/
word-wrap:break-word;
text-align:left;
}
}

.v-cancel{
position:absolute;
top:0;
right:0;
width:100%;
height:70px;
}
.cancel-icon{
position:absolute;
text-align:center;
width:20px;
height:20px;
line-height:20px;
right:20px;
top:50%;
margin-top:-10px;
color:#ffffff;
cursor:pointer;
transition:200ms;
&:hover{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
}
}

2.在nodule同级目录新建vue-component.js

importVAlertfrom'./v-alert';//弹窗

exportdefault{
install(Vue){
Vue.component('VAlert',VAlert);
}
};

3.在main.js中注册为全局组件

importvueComponentfrom"./components/vue-component";

Vue.use(vueComponent);

4.在其他组件可以直接用了,无需import

以上这篇vue实现一个简单的全局调用弹窗案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 实现一个简单的全局调用弹窗案例

热门推荐

随机推荐