vue全局插件——layer弹框

layer 样式

写VUE插件，需要看下VUE的插件部分的api
需求：
完成确定取消事件，默认没有取消事件即单纯为一个layer提示框，

插件写法：
需要这么一个组件，放哪儿随你~~~只需复制粘贴，当然你可以随自己写scss，就全贴了

<template>
    <div class="layer-container">
        <div class="layer-wrapper">
            <div class="layer-close">信息<img class="close-icon" src="" alt=""></div>
            <div class="layer-content">{{options.text}}</div>
            <div class="layer-button">
                <div class="layer-cancle"  v-show="options.cancle" @click="cancleHandle">取消</div>
                <div class="layer-confirm" @click="confirmHandle">确认</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'layer',
        data(){
            return {
                options:{
                    text:'', //
                    confirm:'', //confirm function key 
                    cancle:'', // cancle function key
                }
            }
        },
        created(){
            var self = this;
        },
        methods:{
            cancleHandle(){
                 if(this.options.cancle) {
                     this.options.cancle();
                     this.$layer.hide();
                 }
                 else
                    this.$layer.hide();              
            },
            confirmHandle(){
                if(this.options.confirm){
                    this.options.confirm();
                    this.$layer.hide();                              
                }
                else
                this.$layer.hide();                              
            }
        }
    }
</script>

<style lang="scss">
    .layer-container{
        width: 100%;height: 100%;position: fixed;background-color: rgba(0,0,0,0.3);top:0;left: 0;right: 0;bottom: 0;
        .layer-wrapper{width: 460px;position: absolute;left:50%;top:50%;margin-left: -230px;margin-top: -84px;background: #ffffff;border-radius:2px;z-index: 9999999;
            .layer-close{width: 100%;height: 42px;overflow: hidden;padding : 0 80px 0 20px;position: relative;line-height:42px;font-size:14px;color:#333;background:#f8f8f8;
                .close-icon{width: 100%;height: 100%;position: absolute;right: 0;top: 0;}
            }
            .layer-content{
                font-size: 14px;color: #666666;padding:20px;line-height: 24px;text-align: center;word-break: break-all;
            }
            .layer-button{
                width: 100%;height: 32px;overflow: hidden;display:flex;justify-content: center;margin:0 0 12px;
                div{width: 100px;height: 100%;line-height: 32px;text-align: center;color: #fff;border: 1px solid #E5E5F0;border-radius: 4px;cursor: pointer;font-size: 14px;}
                .layer-cancle{background-color: #fff;color: #333;}
                .layer-confirm{background-color: #7C77E2;margin-right: 20px;}
            }
        }
    }
</style>

layerPlugin js

//简单的VUE插件
import LayerComponent from './Layer/Layer.vue'  //引入layer 组件

export default {
    install(Vue, options) {   //插件安装
        let Layer = Vue.extend(LayerComponent)  
        let $vm = new Layer()

        Vue.prototype.$layer = { // 在Vue的原型上添加实例方法，以全局调用  //layer 方法
            show(opt) { // 控制toast显示的方法  //show 事件
                $vm.options = opt;
                document.body.appendChild($vm.$mount().$el)   //插入dom
            },
            hide(opt) { // 控制toast隐藏的方法
                console.log(opt)
                document.body.removeChild($vm.$mount().$el)
            }
        }
}

mainjs

import Vue from 'vue'
import layerPlugins from './plugins/common.js'

Vue.use(layerPlugins);
new Vue({
    el: '#app',
    render: h => h(App)
})

使用：

this.$layer.show({
        text:'', //text   必填
        confirm:'', //confirm function 非必填  
        cancle:'', // cancle function 非必填  有取消事件回掉，将显示取消按钮
})

插件就是这么简单~~~
git：https://github.com/wulibaibao