vue封装一个简单的toast,使用 Vue.extend+$mount

1、首先创建一个组件Toast.vue，代码如下

<template>
  <div class="toast" v-if="show">
      <div class="toast_text">{{text}}</div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            text:'text',
            show:false,
        }
    },
    methods: {
        showToast (text,duration=1000){
            this.show = true
            this.text = text
            setTimeout(() => {
                this.show = false
            }, duration);
        }
    }
}
</script>

<style>
 .toast_text{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color: rgba(0, 0, 0, 0.5);
     text-align: center;
     vertical-align: middle;
 }
</style>

2、新建一个toast.js

import Vue from 'vue'
import Toast from './Toast.vue'  //引入toast组件
let ToastConstract = Vue.extend(Toast)   //扩展一个toast实例构造器
function toastShow () {
    let toastDom = new ToastConstract()  //new实例化一个对象
    toastDom.$mount(document.createElement('div'))  //挂载到某一元素上，这里挂载到div上
    document.body.appendChild(toastDom.$el)   //将div中包裹的toast元素内容添加到body上
    Vue.prototype.$toast = toastDom  //挂载到vue原型链上
    // 这样就可以在所有 vue 的实例里面使用 this.$toast，调用 this.$toast.showToast(text,duration)
}
export default toastShow

3、在入口的main.js中引用

import Vue from 'vue'
import App from './App.vue'
import Toast from './components/Toasts/toast'
Vue.use(Toast)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4、在需要的地方调用

showToastFun () {

            this.$toast.showToast('我出来了',2000)

        }