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 组件 以来添加显示消失动画