vue 弹窗插件

1、新建messageBox vue组件

<div class='messageBox'>
    <p>{{title}}p>
    <p>{{content}}p>
    <button @click="handleOk">dianjibutton>
div>
template>
<style scoped>
...
style>

2、新建js文件

import Vue from 'vue'
//导入步骤1新建的vue组件
import messageBox from './messageBox.vue'

let MessageBox=(opt)=>{
    let myComp=Vue.extend(messageBox)

    let vm=new myComp({
        el:document.createElement('div'),
        data:{ 
            title:opt.title || '默认标题',
            content:opt.content ||'默认内容'
        },
        methods:{
            messageTest(){
                if(opt.handleOk){
                    opt.handleOk()
                    document.body.removeChild(vm.$el)
                }
            }
        }
    })
    document.body.appendChild(vm.$el)
}

export default{
    install(Vue){
        Vue.prototype.message=MessageBox
    }
}

3、在main.js中导入

//导入步骤2新建的js文件
import messageBox from 'index.js'
Vue.use(message)

4、在其它组件使用

<template>
<button @click="message">测试弹出button>
template>
<script>
	export default{
		data(){
			return{}
		},
		methods:{
			message(){
				this.messageBox({
					title:'标题',
					content:'内容',
					handleOk(){
						console.log('you click ok')
					}
				})
			}
		}
	}
script>