博客

如果不需要this$showToast.load(‘正在加载’)   这样的需求  把它封装成 组件就可以了  你可以看看 (也是我写的效果一样)

https://blog.csdn.net/echo_Ae/article/details/89530951

效果图

1、新建一个js文件(如showToast.js)这个记得要在main.js引入(入口文件)

const showToast = {
    /**
     * @param {*} content 文字内容
     * @param {*} show 是否显示
     * @param {*} type 展示相应图标，支持 load / success / fail
     * @param {*} duration 显示时长，单位为 ms，默认 2800
     */
    // 弱提示(加载)
    loading(content = '正在加载') {
        let type = 'load'
        this.hint(content, type)
    },
    // 弱提示(成功)
    success(content = '操作成功', duration = 2800) {
        let type = 'success'
        this.hint(content, type, duration)
    },
    // 弱提示(失败)
    fail(content = '操作失败', duration = 2800) {
        let type = 'fail'
        this.hint(content, type, duration)
    },
    // 隐藏弱提示(加载、成功、失败)
    hideShowToast() {
        if (document.getElementById('toastLoaderFullScreen')) {
            document.body.removeChild(document.getElementById('toastLoaderFullScreen'))
        }
    },
    // 显示弱提示(成功、失败)
    hint(content = '', type = '', duration = '') {
        if (document.getElementById('toastLoaderFullScreen')) {
            document.body.removeChild(document.getElementById('toastLoaderFullScreen'))
        }
        // 容器
        let toastLoaderFullScreen = document.createElement('div')
        toastLoaderFullScreen.id = 'toastLoaderFullScreen'
        document.body.appendChild(toastLoaderFullScreen)

        // 遮罩
        let toastLoaderContent = document.createElement('div')
        toastLoaderContent.id = 'toastLoader_content'
        toastLoaderContent.className = 'toastLoader_toast_show'
        toastLoaderFullScreen.appendChild(toastLoaderContent)

        // 创建图片
        let img = document.createElement('img')
        switch (type) {
            case 'load':
                img.className = 'toastLoader_loadImg_content'
                img.src = './static/img/public/loading1.png'
                break
            case 'success':
                img.src = './static/img/public/success.png'
                break
            case 'fail':
                img.src = './static/img/public/fail.png'
                break
        }
        toastLoaderContent.appendChild(img)

        // 创建提示内容
        let toastLoaderText = document.createElement('div')
        toastLoaderText.id = 'toastLoaderText'
        toastLoaderText.innerHTML = content
        toastLoaderContent.appendChild(toastLoaderText)

        if (type !== 'load') { // 不是加载效果才会定时隐藏
            // 定时隐藏
            let timerDuration = setTimeout(() => {
                if (document.getElementById('toastLoader_content')) {
                    document.getElementById('toastLoader_content').className = 'toastLoader_toast_hide'
                }
                clearTimeout(timerDuration)
                let timerDuration1 = setTimeout(() => {
                    if (document.getElementById('toastLoaderFullScreen')) {
                        document.body.removeChild(document.getElementById('toastLoaderFullScreen'))
                    }
                    clearTimeout(timerDuration1)
                }, 200)
            }, duration)
        }
    }
}
export default {
    install(vue) {
        if (!vue.$showToast) {
            vue.$showToast = showToast
        }

        vue.mixin({
            created: function() {
                this.$showToast = vue.$showToast
            }
        })
    }
}

2.新建一个css文件(如toast.css) 这个记得要在index.html引入

/* 弱提示css */
#toastLoaderFullScreen {
    font-size: 62.5%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 99999;
    overflow: hidden;
    word-break: break-all;
    background-color: transparent;
}
/* 遮罩 */
#toastLoader_content {
    width: 8rem;
    text-align: center;
    border-radius: 0.5rem;
    position: fixed;
    top: 40%;
    left: 50%;
    margin-left: -4rem;
    z-index: 99999;
    /* background:hsla(0, 40%, 100%, 0.5); */
    /* background: hsl(0, 20%, 90%); */
    background: rgba(0, 0, 0, 0.7);
}
/* 图片 */
#toastLoader_content img {
    width: 3.3rem;
    height: 3.3rem;
    margin-top: 0.5rem;
}
/* 加载图片 */
.toastLoader_loadImg_content {
    width: 2rem !important; 
    height: 2rem !important; 
    margin: 1.1rem 0 0.6rem 0 !important;
    animation: loadImg 3.5s infinite;
}
/* 加载动画 */
 @keyframes loadImg {
    0% {
        transform: rotate(0);
        animation-timing-function: linear;
    }
    50% {
        transform: rotate(900deg);
        animation-timing-function: linear;
    }
    100% {
        transform: rotate(1800deg);
        animation-timing-function: linear;
    }
}
/* 图标 */
#toastLoader_content .material-icons {
    /* margin-top: 1rem; */
    animation: oastLoaderIconsShow ease 800ms;
}
/* 图标显示动画 */
@keyframes oastLoaderIconsShow {
    0% {
        opacity: 0;
        transform: translate3d(0, 10, 0) scale(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/*提示框显示动画*/
.toastLoader_toast_show {
    animation: oastLoaderToastShow ease 800ms;
}
@keyframes oastLoaderToastShow {
    0% {
        opacity: 0;
        transform: translate3d(0, 10, 0) scale(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
/*提示框隐藏动画*/
.toastLoader_toast_hide {
    animation: oastLoaderToastHide ease 800ms;
}
@keyframes oastLoaderToastHide {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }
}
/* 提示文字 */
#toastLoaderText {
    margin: 0 0.5rem 0.5rem 0.5rem;
    word-wrap: break-word; /*自动换行*/
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    /* background-color: red; */
}

3.注册

index.html

 <!-- 弹框(toast)css -->
 <link rel="stylesheet" href="path/toast.css">

main.js

import Vue from 'vue'

import showToast from 'path/showToast'

Vue.use(showToast)

4.使用

<style>

</style>
<template>
    <div>
        <div><button @click="buttom('test')">一套效果</button></div>
        <div><button @click="buttom('load')">加载</button></div>
        <div><button @click="buttom('success')">成功</button></div>
        <div><button @click="buttom('fail')">失败</button></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    // 页面初始化 created activated
    created() {
    },
    // 监听变量
    watch: {

    },
    // 页面加载完
    mounted() {
    },
    // 页面离开 destroyed deactivated
    destroyed() {
    },
    methods: {
        buttom(type) {
            switch(type) {
                case 'test':
                    this.$showToast.loading('正在加载')
                    setTimeout(() => {
                        this.$showToast.success('操作成功')
                    }, 2800)
                    break
                case 'load':
                    this.$showToast.loading('正在加载')
                    setTimeout(() => {
                       this.$showToast.hideShowToast() 
                    }, 2800)
                    break
                case 'success':
                    this.$showToast.success('加载成功')
                    break
                case 'fail':
                    this.$showToast.fail('加载失败')
                    break
                case 'hideShowToast':
                    this.$showToast.hideShowToast()
                    break
            }
        }
    }
}
</script>

github里面有图片

https://github.com/Aliceco/vueShowToast