Vue 封装动态组件

以前用js 封装过一个小的提示组件, 现在用vue再次封装下 查看效果地址 文章加载完, 就可以看到

Alert.vue

<template>
    <div class="box-alert" @click="hide">
        <span>{{message + " "}} </span>
    </div>
</template>
<script>
    import $ from 'jquery'
    export default{
        data(){
            return {
                message: "操作成功",
                flag: true
            }
        },
        watch: {
            visiable(val){
                if(val)
                    this.show();
                else
                    this.hide();
            }            
        },
        methods: {
            show(){
                let boxDom = $(".box-alert");
                boxDom.animate({top: 0}, 709).delay(800).animate({top: -69});
                if (this.flag) {
                    boxDom.css("background","#79ff79");
                    boxDom.find("i").removeClass().addClass("iconfont icon-success");
                }
                else {
                    boxDom.css("background","#ff7575");
                    boxDom.find("i").removeClass().addClass("iconfont icon-error");
                }
            },
            hide(){
                $(".box-alert").stop(true,true).animate({top:-69},600);
            }
        }
    }    
</script>
<style lang="less" scoped>
    .box-alert {
        height: 69px;
        text-align: center;
        color: white;
        position: fixed;
        font-size: 16px;
        top: -69px;
        left: 0px;
        width: 100%;
        z-index: 9999;
        line-height: 60px;
        background:#F44336;
    }
</style>
复制代码

Alert.js

import alert from './Alert.vue'
let instance; 
const plugin = {
    install(vue) {
        let Alerting = vue.extend(alert);
        if(!instance){
            instance = new Alerting({
                el: document.createElement('div')
            })
            document.body.appendChild(instance.$el);
        }
        const alerting = {
            show (options = {}){
                if(typeof options === 'string'){
                    instance.message = options;
                    instance.flag = false;
                }
                else if(typeof options === 'object'){
                    instance.flag = options['flag'];
                    instance.message = options['text'];
                }
                instance.show();
            }
        }
        vue.$xalert = alerting;
        vue.mixin({
            created: function(){
                this.$xalert = vue.$xalert;
            }
        })
    }
}
export default plugin
export const install = plugin.install
复制代码

在main.js 中全局引入

import loadding from './components/owner/ownerAlert/Alert.js'
Vue.use(loadding);
复制代码

在其他页面想要使用

this.$xalert.show({
      text: "加载完成",
      flag: true
});
复制代码

转载于:https://juejin.im/post/5bf523dbe51d450a964241cb