<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) {
? ? //創(chuàng)建vue插件，官方地址https://cn.vuejs.org/v2/guide/plugins.html
? ? let newToast = Vue.extend(Toast); //創(chuàng)建vue構(gòu)造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extend
? ? let toast = new newToast(); //創(chuàng)建實(shí)例
? ? 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("失敗文案");