利用 Vue.extend() 和 $mount 实现全局提示组件

首先先写一个，message组件

<template>
  <div>
    <span class='toast'
          v-show='isShow'
          :class='color'>
      {{message}}
    </span>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: '',
      isShow: false,
      color: '',
    }
  },
  methods: {
    success (message, duration) {
      this.color = 'green'
      this.message = message
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
        this.message = ''
      }, duration)
    },
    error (message, duration) {
      this.color = 'red'
      this.message = message
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
        this.message = ''
      }, duration)
    }
  }
}
</script>

在messsage同级文件下创建index.js文件用于挂载message组件

主要就是通过组件实例来触发message组件的显示隐藏

import Massage from './Massage.vue'
export default {
  install: (Vue) => {
    // 创建构造器
    const MassageContrystor = Vue.extend(Massage)
    // new的方式 根据组件构造器，可以创建组件对象
    const massage = new MassageContrystor()
    // 手动挂载某一个元素上
    massage.$mount()
    // $el对应的就是 alert组件
    document.body.appendChild(massage.$el)
    console.log(alert)
    Vue.prototype.$massage = massage
  }
}

main.js 安装

import massage from './components/massage/index.js'
Vue.use(massage)

调用

 this.$massage.success('登陆成功', 1000)
 this.$massage.error('登陆失败', 1000)