Vue自定义信息提示全局组件

话不多说直接上代码：

组件代码：

//window信息弹层组件
Vue.component("pop-up",{
    template:'<div class="prompt" v-show="message == \'\' ? false : true">{{message}}</div>',
    props:["message"],
    updated(){
        var _that = this;
        setTimeout(function(){
            _that.$emit("fadeout");
        },2500)
    }
})
           

组件css：

/*信息提示层*/
.prompt{
    z-index: 9999;
    position: fixed;
    padding: .45em .25rem;
    background-color: rgb(0 0 0 / 55%);
    color: #fff;
    font-size: .38rem;
    border-radius: .2rem;
    top: 5rem;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-name: fadeIn;
}
           

使用：

<!--信息提示层-->
    <pop-up :message="errorMsg" @fadeout="fadeOutPop"></pop-up>
           

页面vue实例data中需要定义“errorMsg”变量，methods中定义fadeOutPop回调方法：

<script>
    var vu = new Vue({
        el: "#app",
        data: {
            errorMsg:"",
        },

        methods: {
            //提示信息弹层关闭
            fadeOutPop(){
                this.errorMsg = "";
            }
        }
    })
</script>
           

 看效果：