vue2-自定义全局toast提示插件

编写toast.vue

在components文件夹下新增toast文件夹，并在toast文件夹中新增index.vue文件

`

<template>
    <div id="toast">
          <span class="toast" @mouseleave="start" @mouseenter="stop" :style="{ top: styleTop, color: color }">
              <i :class="icon" :style="{ marginRight: '5px' }"></i>
              <div> {{ message }}</div>
              <i class="el-icon-close close hand-style" v-if="showCloseBtn" @click="close"></i>
          </span>
    </div>
</template>

<script>
    export default {
        name: 'Toast',
        data() {
            return {
                message: '',
                icon: "",
                type: "normal",
                color: "#49b1f5",
                styleTop: "-100px",
                timer: null,
                showCloseBtn: false
            };
        },

        methods: {
            close() {
                this.styleTop = "-100px"
                clearInterval(this.timer);
            },
            stop() {
                clearInterval(this.timer);
            },
            start() {
                this.timer = setTimeout(() => {
                    this.styleTop = "-100px"
                }, 3000);
            },
            after(message) {
                clearInterval(this.timer);
                this.message = message;
                this.styleTop = "30px"
                this.timer = setTimeout(() => {
                    this.styleTop = "-100px"
                }, 3000);
            },

            show(option) {
                switch (option.type) {
                    case "error":
                        this.color = "#F56C6C";
                        this.icon = "iconfont icon-cuo";
                        break;
                    case "success":
                        this.color = "#52C41A";
                        this.icon = "iconfont icon-chenggong";
                        break;
                    case "warnning":
                        this.color = "#F57C00";
                        this.icon = "iconfont icon-jinggao1";
                        break;
                    case "info":
                        this.color = "#909399";
                        this.icon = "iconfont icon-jinggao1";
                        break;
                    default:
                        this.icon = "iconfont icon-jinggao1";
                        this.color = "#49b1f5"
                        break;
                }
                this.showCloseBtn = option.showClose;
                this.after(option.message)
            },
            success(message) {
                this.color = "#52C41A";
                this.icon = "iconfont icon-chenggong";
                this.after(message)
            },
            error(message) {
                this.color = "#F56C6C";
                this.icon = "iconfont icon-cuo";
                this.after(message)
            },
            warnning(message) {
                this.color = "#F57C00";
                this.icon = "iconfont icon-jinggao1";
                this.show = true;
                this.after(message)
            },
            info(message) {
                this.color = "#909399";
                this.icon = "iconfont icon-jinggao1";
                this.show = true;
                this.after(message)
            },
        },
    };
</script>

<style lang="scss" scoped>
    .toast {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        padding: 10px;
        border-radius: 3px;
        z-index: 99999;
        width: fit-content;
        height: fit-content;
        transition: all 0.35s;
        background-color: #fff;
        display: flex;
        align-items: center;

        i {
            font-size: 1.2rem;

        }

        .close {
            margin-left: 30px;
        }
    }
</style>

`

注册toast插件并全局挂载

在main.js文件中添加如下内容

import Toast from '@/components/toast/index.vue';
const ToastPlugin = {
  install(Vue) {
    Vue.prototype.$toast = new Vue(Toast).$mount();
    document.body.appendChild(Vue.prototype.$toast.$el);
  },
};
Vue.use(ToastPlugin);

页面中调用

this.$toast.success("成功");
this.$toast.error("错误");
this.$toast.warnning("警告");
this.$toast.info("提示");

效果图

成功

错误

警告

提示