//第二中方法所有的传值回调都只需要在组件内部的一个方法调用然后在组件外部this.$refs[xxx].open调用然后.then触发回调，比上一种方便些
var initOtherText = {
sureText: "",
cancelText: "",
title: "",
small: false
};
export default {
props: {
title: {
type: String
},
sureText: {
type: String
},
cancelText: {
type: String
},
value: {
type: Boolean
},
small: {
type: Boolean
}
},
watch: {
value(newVal) {
this.showModal = newVal;
}
},
data() {
return {
otherText: JSON.parse(JSON.stringify(initOtherText)),
showModal: this.value
};
},
methods: {
makeSure() {
this.$emit("on-ok");
this.$emit("input", false);
},
makeCancel() {
this.$emit("on-cancel");
this.$emit("input", false);
},
openModal(otherText) {
this.otherText = { ...otherText };
this.showModal = true;
var pms = new Promise((resolve, reject) => {
this.$refs["sure"].addEventListener("click", () => {
this.showModal = false;
resolve("点击了确定");
});
this.$refs["cancel"].addEventListener("click", () => {
this.showModal = false;
reject("点击了取消");
});
});
return pms;
}
}
};
</script>
<style lang="scss" scoped>
.shadow {
background-color: rgba(0, 0, 0, 0.5);
display: table;
height: 100%;
left: 0;
position: fixed;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 50;
}
.modal {
display: table-cell;
vertical-align: middle;
overflow-x: hidden;
position: fixed;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
border-radius: 5px;
outline: 0px;
overflow: hidden;
transition: all 0.3s ease;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
}
.header {
align-items: center;
background-color: #62a39e;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
color: #fff;
font-weight: bold;
display: -ms-flexbox;
display: flex;
height: 3.5rem;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
.body {
align-items: center;
padding: 1.5rem;
}
.footer {
justify-content: flex-end;
padding: 1.5rem;
position: absolute;
bottom: 0;
width: 100%;
float: right;
}
.item {
color: white;
text-align: center;
