Vue封装注册全局的组件

最近的项目中需要使用统一的全局消息提示弹窗，所以我就注册了一个全局的组件。通过extend生成一个Vue的子类，创建的组件。

案例一

toast.vue

<template>
    <div>
           <div>
               < button @click="okClick">确定</button>
               < button @click="cancelClick">确定</button>
                <div>{{message}}</div>
          </div>
        </MyModal>
    </div>
</template>

<script>
    export default {
        name: 'toast',
        data () {
            return {
                show1: false
            }
        },
        props: ['message', 'visible'],
        mounted () {
        },
        methods: {
            okClick: () => {
                this.$emit('onOk')
            },
            cancelClick: () => {
                this.$emit('onCancel')
            }
        },
        watch: {
            visible: {
                handler: function (data) {
                    this.show1 = data
                },
                immediate: true
            }
        }
    }
</script>

<style scoped>

</style>

toast.js

import ToastComponent from '@/components/toast'

const Toast = {}
// 注册Toast
Toast.install = function (Vue) {
    // 生成一个Vue的子类
    // 同时这个子类也就是组件
    const ToastConstructor = Vue.extend(ToastComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor()
    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    // 通过Vue的原型注册一个方法
    // 让所有实例共享这个方法
    Vue.prototype.$toast = (config) => {
        console.log(config instanceof String)
        if (typeof (config) === 'string' || typeof (config) === 'number') {
            instance.message = config
            instance.visible = true
            instance.okClick = () => {
                instance.visible = false
            }
            instance.cancelClick = () => {
                instance.visible = false
            }
            return
        }
        instance.message = config.content
        instance.visible = true
        instance.okClick = config.onOk ? function () {
            instance.visible = false
            config.onOk()
        } : function () {
            instance.visible = false
        }
        instance.cancelClick = config.onCancel ? function () {
            instance.visible = false
            config.onCancel()
        } : function () {
            instance.visible = false
        }
    }
}

export default Toast

main.js中注册：

import Toast from './toast.js' 
Vue.use(Toast)

使用方式：

this.$toast('系统异常')
this.$toast({
    content: '系统异常'
})
this.$toast({
    content: '系统异常',
    onOK: () => {
        console.log('ok')
     },
    onCancel: () => {
      console.log('cancel')
    }
})

案例二

loading.vue

<template>
    <div id="custom-loading" class="custom-loading">
        <div class="demo-spin-container">
            <Spin fix>
                <Icon type="load-c" :size="size" class="demo-spin-icon-load"></Icon>
                <div>{{text}}</div>
            </Spin>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Loading',
    data () {
        return {}
    },
    props: {
        text: {
            type: String,
            default: 'Loading'
        },
        size: {
            type: Number,
            default: 30
        }
    }
}
</script>
<style>
.demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .ivu-spin-fix{
        z-index: 1002;
    }
</style>

loading.js

import LoadingComponent from '@/components/Loading'

const Loading = {}
// 注册Loading
Loading.install = function (Vue) {
    // 生成一个Vue的子类
    // 同时这个子类也就是组件
    Vue.prototype.$loading = {}
    Vue.prototype.$loading.show = (config) => {
        const LoadingConstructor = Vue.extend(LoadingComponent)
        // 生成一个该子类的实例
        const instance = new LoadingConstructor()
        // 并将此div加入全局挂载点内部
        document.body.appendChild(instance.$mount().$el)
        if (config) {
            instance.size = config.size
            instance.text = config.text
        }
    }
    Vue.prototype.$loading.hide = () => {
        document.body.removeChild(document.querySelector('#custom-loading'))
    }
}

export default Loading

main.js中注册：

import Loading from './loading.js' 
Vue.use(Loading)

使用方式：

this.$loading.show()
this.$loading.hide()
this.$loading.show({
      size: 30,
      text: '加载中'
})