Vue 自定义模态框
模框组件
// MyModal.vue
<template>
<div class="dialog">
<slot name="content"></slot>
<div class="btn-group">
<div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
<div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
</div>
</div>
</template>
<script>
export default {
name: "MyModal",
props: {
dialogOption: Object
},
data() {
return {
resolve: "",
reject: "",
promise: "" //保存 promise 对象
};
},
computed: {
modal() {
let option = this.dialogOption;
return {
cancelButtonText: option.cancelButtonText
? option.cancelButtonText
: "取消",
confirmButtonText: option.confirmButtonText
? option.confirmButtonText
: "确定"
};
}
},
methods: {
//确定,将 promise 断定为完成态
submit() {
this.resolve();
},
// 取消,将 promise 断定为 reject 状态
cancel() {
this.reject();
},
//显示 confirm 弹出,并创建 promise 对象,给父组件调用
cb() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
return this.promise; //返回 promise 对象,给父级组件调用
}
}
};
</script>
父组件
// app.vue
<template>
<div>
<button @click="open">打开模态框</button>
<!-- 自定义模态框组件 -->
<my-modal :dialogOption="dialogOption" v-show="isShow" ref="dialog">
<div slot="content">
<span>插入新内容</span>
</div>
</my-modal>
</div>
</template>
<script>
import MyModal from "./components/MyModal.vue";
export default {
name: "app",
components: {
MyModal
},
data() {
return {
isShow: false,
dialogOption: {
cancelButtonText: "取消",
confirmButtonText: "确定"
}
};
},
methods: {
open() {
this.isShow = true;
this.$refs.dialog
.cb()
.then(() => { // 传到 MyModal 中的回调函数
this.isShow = false;
})
.catch(() => { // 传到 MyModal 中的回调函数
this.isShow = false;
});
}
}
};
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: JavaScript 数组原生方法集合
下一篇: 不要相信一个熬夜的人说的每一句话
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论