一.先创建一个toast文件,里面再创建一个toast.vue和一个index.js

toast.vue

<template>
<div class="toast"  v-show="isShow">
<div>{{message}}</div>
</div>
</template>

<script>
export default {
props:{
},
data() {
  return {
    message:'',
    isShow:false
  }
},
methods: {
  show(message = '默认显示', duration = 1000){
    this.isShow = true;
    this.message = message

    setTimeout(()=>{
   this.isShow = false;
   this.message =''
    },duration)
  }
},
}
</script>

<style scoped>
.toast{
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  font-size: 20px;
  top: 30%;
  left: 50%;
  z-index: 1000;
  color: #ffffff;
  background: rgba(0, 0, 0, .7);
  padding: 10px;
  transform: translate(-50%,-50%)
}
</style>

index.js

import Toast from './toast.vue'//(根据自己路径)
const obj ={}

obj.install =function(Vue){
 // 1.创建组价构造器
 const toastContrustor = Vue.extend(Toast)

 // 2.new的方式,根据组件构造器,可以创建出来一个组件对象
 const toast = new toastContrustor()

 // 3.将组件对象,手动挂载到某一个元素上
 toast.$mount(document.createElement('div'))

 // 4.toast.$el对应的就是div
 document.body.appendChild(toast.$el)

  Vue.prototype.$toast =toast
}
export default obj

二.在main.js中用引入插件的方式引入

import toast from './components/common/toast'//(根据自己路径)
Vue.use(toast)

三.在页面进行使用

  this.$toast.show(content,time)
 - content:你要显示的内容
 - time:多长时间消失
 示例:
 this.$toast.show('测试封装函数',1000)