Vue手写一个弹出框复用组件

虽然现在UI框架很多有弹出框这个组件，但是自己写是不是更能体现自己的能力呢，样式也可以随意改变，哈哈，个人觉得是这样

首先创建一个message文件,里面创建一个messageBox.vue

<template>
    <div class="messageBox">
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
        <div>
            <div v-if="cancel" @touchstart="handleCancel">{{ cancel }}</div>
            <div v-if="ok" @touchstart="handleOk">{{ ok }}</div>
        </div>
    </div>
</template>

<script>

export default {
}
</script>
<style lang='scss' scoped>
.messageBox {
    width: 200px;
    height: 120px;
    border: 1px #ccc solid;
    border-radius: 4px;
    background-color: red;
    position: absolute;
    left: 50%;
    color: #fff;
    top: 50%;
    transform: translate(-50%,-50%);
    h2 {
        text-align: center;
        font-size: 18px;
    }
    p {
        text-align: center;
    }
    > div {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #ccc;
        div {
            flex: 1;
            text-align: center;
            line-height: 30px;
            border-right: 1px #ccc solid;
        }
        div:last-child {
            border: none;
        }
    }
}
</style>

同级创建一个index.js文件

import Vue from ‘vue’
import MessageBox from ‘./messageBox’

export var messageBox = (function () {

return function (opts) { //配置参数
    var defaults = { //默认值
        title: '',
        content: '',
        cancel: '',
        ok: '',
        handleCancel: null,
        handleOk: null
    }
    var MyComponent = Vue.extend(MessageBox)

    for (var attr in opts) {
        defaults[attr] = opts[attr]
    }
    var vm = new MyComponent({
        el: document.createElement('div'),
        data: {
            title: defaults.title,
            content: defaults.content,
            cancel: defaults.cancel,
            ok: defaults.ok
        },
        methods: {
            handleCancel() {
                defaults.handleCancel && defaults.handleCancel.call(this)
                document.body.removeChild(vm.$el)
            },
            handleOk() {
                defaults.handleOk && defaults.handleOk.call(this)
                document.body.removeChild(vm.$el)
            }
        }
    })
    document.body.appendChild(vm.$el)
}
 })();

下面演示一下怎么用这个组件

 <button @click="open()" style="background:red">出来</button>
 
 import {messageBox} from './message'
 methods:{
   open(){
     messageBox({
    title:'定位',
    content:'武汉',
    cancel:'取消',
    ok:'切换定位',
    handleCancel(){    //取消事件
      console.log('我取消了')
    },
    handleOk(){    //切换事件
      console.log('切换位置了')
    }
 })
  },
 }

效果如下