vue插件--仿微信小程序showModel实现模态提示窗

效果图：

下面是源码：

index.js

import Vue from 'vue';
import model from './model.vue';


export default {
    install(Vue) {
        
        const defaults = {
            show: false,
            mask: true,
            title: '提示',
            content: '这是正文',
            confirmButton: true,
            cancelButton: true,
            confirmText: '确认',
            cancelText: '取消',
            cancelCallBack: () => {},
            confirmCallBack: () => {}
        };

        const modelVueConstructor = Vue.extend(model);

        Vue.prototype.$model = (options = {}) => {
            if (Vue.prototype.$isServer) return;
            options = Object.assign({}, defaults, options);
            let parent = document.body ;
            let instance = new modelVueConstructor({
                el: document.createElement('div'),
                data: options
            });
            parent.appendChild(instance.$el);

            return instance;
        };

    },
};

model.vue

<template>
    <div v-if="show" class="model-container">
        <div class="model-main">
            <div class="model-title">{{title}}</div>
            <div class="model-content" v-html="content"></div>
            <div class="model-buttons">
                <button v-if="cancelButton" @click="cancelClick" class="button">{{cancelText}}</button>
                <button v-if="confirmButton" @click="confirmClick" class="button confirm">{{confirmText}}</button>
            </div>
        </div>
        <div v-show="mask" class="model-mask"></div>
    </div>
  
</template>

<script type="text/babel">
  export default {
    data() {
      return {
        show: false,
        mask: true,
        title: '提示',
        content: '这是正文',
        confirmButton: true,
        cancelButton: true,
        confirmText: '确认',
        cancelText: '取消',
        cancelCallBack: () => {},
        confirmCallBack: () => {}
      };
    },
    methods: {
        cancelClick(){
            this.show = false;
            this.cancelCallBack();
        },
        confirmClick(){
            this.show = false;
            this.confirmCallBack();
        }
    }
  };
</script>
<style lang="less" scoped>
   .model-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--model-index);
        display: flex;
        justify-content: center;
        align-items: center;
        .model-main{
            position: relative;
            z-index: 9;
            width: 80%;
            background-color: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
            .model-title{
                font-size: 18px;
                color: #333;
                width: 100%;
                padding: 18px;
                font-weight: bold;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .model-content{
                font-size: 16px;
                color: #666;
                padding: 10px;
                padding-top: 0px;
                padding-bottom: 20px;
            }
            .model-buttons{
                width: 100%;
                display: flex;
                align-items: center;
                .button{
                    flex: 1;
                    padding: 18px 10px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    font-size: 16px;
                    outline: none;
                    background-color: #ffffff;
                    border-top: 1px solid #f2f2f2;
                    border-right: 1px solid #f2f2f2;
                    &.confirm{
                        color: var(--theme);
                        font-weight: bold;
                    }
                    &:last-child{
                        border-right: 0;
                    }
                    &:active{
                        background-color: #f2f2f2;
                    }
                }
            }
        }
        .model-mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background-color: rgba(0,0,0,0.45);
        }
    }
</style>

通过添加实例方法，把插件添加到vue.prototype上来实现。

在使用之前需要将插件挂载到Vue全局实例上：

main.js

import VueModel from './components/model/index.js';
Vue.use(VueModel);

完成上述条件后，就可以在你的vue项目中使用啦：

this.$model({
    show: true,
    title: "提示",
    content: "提示内容",
    cancelButton: true,
    confirmCallBack: () => {
        console.log("确认");
    },
    cancelCallBack: () => {
        console.log("取消");
    }
});