const modal = new Modal({
modals: [
{
name: "modalName",
component: () => import("./components/HelloWorld.vue"),
},
],
});
new Vue({
modal,
render: (h) => h(App),
}).$mount("#app");
<!-- modalView是全局组件,所以不需要引入,后面调用的modal会在这个modalView展示 -->
<template>
<div id="app">
<modal-view name="fade" />
</div>
</template>
<template>
<div class="hello">
{{ msg }}
<button @click="onChange">促发emit</button>
<button @click="closeModal">关闭弹窗</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
methods: {
closeModal() {
this.$modal.close();
},
onChange() {
this.$emit("change", "hello world");
},
},
};
</script>
// this.$modal是当前new Modal的实例已经自定注册
await this.$modal.open("modalName", {
// 传递给组件的props
props: {
msg: this.msg,
},
// 监听$emit出来得事件
on: {
change: (val) => {
this.$modal.close();
},
},
});