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>
           

 看效果：