因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装
- 现在需要一个全局的弹窗,要有promise异步处理
- 实现后的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ea68130af7d31daeab63174868ffa484.png#pic_center)
<template>
<div class="popup-wrap" v-if="showPopup">
<div class="popup-center">
<div class="popup-content">
<div class="popup-close" @click="close"></div>
<div class="title">{{ title }}</div>
<div class="describe">{{ content }}</div>
<div class="btn">
<div :class="['btn-right', active == 'cancal' ? 'active' : '']" @click="handleClick('cancal')">{{cancelBtnText}}</div>
<div :class="['btn-right', active == 'yes' ? 'active' : '']" @click="handleClick('yes')">{{yesBtnText}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showPopup: false,
title: "",
content: "",
yesBtnText: "",
cancelBtnText: "",
promiseStatus: null,
active: "",
};
},
watch: {},
props: {},
mounted () {
this.confirm()
},
methods: {
confirm() {
this.showPopup = true;
return new Promise((resolve, reject) => {
this.promiseStatus = { resolve, reject };
});
},
handleClick(e) {
this.active = e;
if (e == "yes") {
this.promiseStatus && this.promiseStatus.resolve();
} else {
this.promiseStatus && this.promiseStatus.reject();
}
this.showPopup = false
},
close() {
this.showPopup = false
this.promiseStatus && this.promiseStatus.reject();
},
},
};
</script>
<style lang="less" scoped>
.popup-wrap {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0rem;
left: 0rem;
right: 0rem;
bottom: 0rem;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
.popup-center {
width: 990px;
height: 413px;
background-size: 990px 413px;
display: flex;
align-items: center;
justify-content: center;
.popup-content {
position: absolute;
width: 970px;
height: 393px;
background: linear-gradient(
180deg,
rgba(5, 20, 39, 0.9) 0%,
rgba(3, 17, 33, 0.9) 54%,
rgba(1, 33, 74, 0.9) 100%
);
.popup-close {
cursor: pointer;
position: relative;
top: 45px;
left: 900px;
width: 26px;
height: 26px;
border: 1px solid #fff;
background-size: 100% 100%;
}
.title {
text-align: center;
margin-top: 50px;
font-size: 40px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #258df9;
line-height: 56px;
background: linear-gradient(180deg, #afebff 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.describe {
text-align: center;
margin-top: 30px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a4bace;
line-height: 40px;
}
}
}
.btn {
width: 540px;
height: 76px;
margin: 0 auto;
margin-top: 45px;
display: flex;
align-items: center;
justify-content: space-between;
.btn-right {
cursor: pointer;
width: 200px;
height: 76px;
border: 2px solid #a4bace;
font-size: 30px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a4bace;
line-height: 76px;
text-align: center;
&.active {
border: 2px solid #258df9;
background: rgba(37, 141, 249, 0.3);
color: #afebff;
}
}
}
}
</style>
import Confirm from '@/components/confirm.vue'
import Vue from "vue";
const ConfirmBox = Vue.extend(Confirm);
Confirm.install = (content, title, options) => {
if (typeof title === 'object') {
options = title;
title = '';
} else if (title === undefined) {
title = '';
}
options = Object.assign({
title: title,
content: content,
}, options);
let instance = new ConfirmBox({
data: options
}).$mount();
document.body.appendChild(instance.$el);
return instance.confirm();
};
import "@/util/confirm"
import Confirm from '@/components/confirm'
Vue.config.productionTip = false
Vue.prototype.$confirm = Confirm.install;
<template>
<div @click="handleClick">点击</div>
</template>
<script>
export.default = {
data () {},
methdos: {
handleClick () {
this.$confirm("此操作将永久删除该文件, 是否继续?", "确定执行删除操作吗", {
cancelBtnText: "取消",
yesBtnText: "确认执行",
})
.then(() => {
console.log("点击了确认按钮");
})
.catch(() => {
console.log("点击了取消按钮cancel");
});
}
}
}
</script>