1、确认框的样式。
<template>
<div class="confirm" v-if="isShow">
<div class="con_box">
<div class="header">
<div class="left">{{ object.type }}</div>
<div class="right" @click="close()">X</div>
</div>
<div class="context">
<div class="tip">
<p>{{ object.msg }}</p>
</div>
<div class="btns">
<div class="cancelBtn btn" @click="close()">
{{ object.btn.close }}
</div>
<div class="okBtn btn" @click="confirm()">
{{ object.btn.confirm }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true,
object: {
type: "提示",
msg: "确定删除此条信息?",
btn: {
confirm: "确定",
close: "取消"
}
}
};
},
methods: {
close() {
console.log("关闭");
},
confirm() {
console.log("确定");
}
}
};
</script>
<style lang="scss" scoped>
@keyframes myfirst {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.confirm {
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: fixed;
top: 0;
animation: myfirst 0.5s;
.tip {
margin: 0 auto;
text-align: center;
p {
font-size: 14px;
color: #787993;
margin-top: 20px;
margin-bottom: 36px;
}
}
.header {
width: 518px;
height: 54px;
background-color: #f9f9fd;
border-radius: 16px 16px 0px 0px;
padding: 0 30px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.con_box {
width: 518px;
height: 200px;
background-color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 5px;
}
.btns {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
align-items: center;
.btn {
border-radius: 8px;
width: 160px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.cancelBtn {
background-color: #f9f9fd;
border: solid 1px #f1f1f1;
font-size: 14px;
color: #787993;
margin-right: 15px;
}
.okBtn {
background-color: #195fff;
font-size: 14px;
color: #ffffff;
}
}
}
</style>
2、最关键的js 文件,使用该方法可以在页面添加一个子节点,挂载我们自己写的确认弹框 样式。
import Vue from "vue";
import confirm from "./myDelete.vue";
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function(object) {
return new Promise((res, rej) => {
let confirmDom = new confirmConstructor({
el: document.createElement("div")
});
document.body.appendChild(confirmDom.$el);
confirmDom.object = object;
confirmDom.confirm = function() {
res();
confirmDom.isShow = false;
};
confirmDom.close = function() {
rej();
confirmDom.isShow = false;
};
});
};
export default theConfirm;
3、在 main.js 中进行绑定
import theConfirm from "./components/confirm/comfirm.js";
Vue.prototype.$confirm2 = theConfirm;
4、在实际的 vue 文件 中使用
this.$confirm2({
type: "提示",
msg: "确定删除此条信息?",
btn: {
confirm: "确定",
close: "取消"
}
})
.then(() => {
console.log("ok");
})
.catch(() => {
console.log("no");
});