vue如何实现Toast轻提示_vue.js_

<template>    <div class="context" v-show="isshow">      <span class="tip">{{ text }}</span>    </div>  </template>

<script>  export default {    name: "Toast",    props: {      isshow: {        type: Boolean,      },      text: {        type: String,      },    },    watch: {      isshow(val) {        if (val === true) {          setTimeout(() => {            this.isshow = false;          }, 3000);        }      },    },  };

</script>  <style lang="less" scoped>  .context {    position: absolute;    top: 0;    width: 100%;    height: 100%;    z-index: 100;    display: flex;    justify-content: center;    align-items: center;    .tip {      background-color: rgba(40, 40, 40, 0.8);      color: aliceblue;      font-size: 0.6rem;      padding: 0.2rem;      border-radius: 0.1rem;    }  }  </style>

import Toast from "./Toast.vue";  let NewToast = {    install: function (Vue) {      //创建vue插件，官方地址https://cn.vuejs.org/v2/guide/plugins.html      let newToast = Vue.extend(Toast); //创建vue构造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extend      let toast = new newToast(); //创建实例      document.body.appendChild(toast.$mount().$el); //挂载      Vue.prototype.$Toast = function (text) {        toast.isshow = true; // 传入props        toast.text = text; // 传入props      };    },  };  export { NewToast };

import { NewToast } from "@/components/index.js";  Vue.use(NewToast);

but() {      this.$Toast("Are you ok ?");  },

Toast.success('成功文案');  Toast.fail('失败文案');

this.$toast.success("成功文案");  this.$toast.fail("失败文案");