1.0.1 • Published 4 months ago
vue2-modals v1.0.1
vue2-models 一个基于 vue2 的一个命令式调用 modal
使用
- 引用
import Modal from "vue2-modals";
Vue.use(Modal);
- 初始化
const modal = new Modal({
modals: [
{
name: "modalName",
component: () => import("./components/HelloWorld.vue"),
},
],
});
new Vue({
modal,
render: (h) => h(App),
}).$mount("#app");
- 在 App.vue 使用 modalView 组件
<!-- modalView是全局组件,所以不需要引入,后面调用的modal会在这个modalView展示 -->
<template>
<div id="app">
<modal-view name="fade" />
</div>
</template>
- 编写 modal 弹窗
<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();
},
},
});
- API
- open(modalName,{props,on}) 打开弹窗
- close() 关闭弹窗
- modal-view 组件接收 name 属性,传递给 Vue 的 Transition 组件 以来添加显示消失动画