Vue插件：封装独立的通用组件可复用的单文件式全局Toast弹窗

##功能说明

1、支持自定义弹窗文案，并自动计算弹窗的高度调整在屏幕的位置，以一直保持居中

2、支持自定义弹窗显示时长（默认2秒，单位毫秒）

3、支持回调函数，callback将在设定的时间结束后才执行

使用方式

1、将 showToast.vue 文件放置于项目的模板文件夹（个人习惯为 src/components）

2、打开 App.vue，引入vue和showToast组件，并use该组件（其实是use组件里的方法，只不过打包为一个文件了）。

template部分（举例，主要就是showToast那里）：

<template>
    <div id="app">
        <router-view></router-view>
        <ShowToast></ShowToast>
    </div>
</template>

script部分：

//引入Vue
import Vue from 'vue'

//引入组件，@cp是我自定义的路径别名，相当于@/components/
import ShowToast from '@cp/showToast.vue'

//注册使用方法
Vue.use(ShowToast)

//添加模板
export default {
    name: 'App',
    components: { ShowToast },
}

3、之后在App.vue或者任意子组件里，就可以直接通过 this.$showToast(文案, 显示时间, 回调函数) 去唤起Toast弹窗了。

//默认2秒的弹窗
this.$showToast("默认2秒的弹窗");

//持续显示10秒的弹窗
this.$showToast("持续显示10秒", 10000);

//执行回调函数
this.$showToast("发布成功，即将进入首页…", 2000, () => {
    this.$router.push({
        name: "home"
    });
});

效果预览

组件源码

我使用的是stylus，样式在这里就随便写一下，请根据实际项目需要做调整和本地备份。

<template>
    <div class="common-toast">
        <div class="content">
            <p> 
                <span></span> 
            </p> 
        </div>
    </div>
</template>

<script>
const showToast = {
    install(Vue,options) {
        Vue.prototype.$showToast = function (text, duration = 2000, callback) {
            document.querySelector(".common-toast").style.display = "block";
            const newToast = document.querySelector(".common-toast .content");
            newToast.querySelector("span").innerText = text;
            setTimeout((w,h)=>{
                w = newToast.offsetWidth;
                h = newToast.offsetHeight;
                newToast.style.marginTop = "-" + h/2 + "px";
                newToast.style.marginLeft = "-" + w/2 + "px";
            },10);
            setTimeout(()=>{
                document.querySelector(".common-toast").style.display = "none";
                if (typeof callback === "function"){
                    callback();
                }
            }, duration);
        }
    }
}
export default showToast;
</script>

<style lang="stylus" scoped>
.common-toast
    display none
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(0,0,0,0.6)
    z-index 999998
    .content
        position absolute
        top 50%
        left 50%
        margin-top -1rem
        margin-left -3rem
        background-color rgba(0,0,0,0.4)
        box-shadow 0 0 10px rgba(0,0,0,0.2)
        color #fff
        text-align center
        border-radius 6px
        z-index 999999
        p
            display table-cell
            vertical-align middle
            width 6rem
            height 2rem
            box-sizing border-box
            padding 0.2rem
            overflow hidden
        span
            font-size 0.3865rem
            vertical-align middle
            color #fff
</style>

保存为 showToast.vue 文件到项目模板文件夹下即可，以后如果要引用，就直接引入该文件就ok。