2021-09-14自定义toast提示弹窗组件

1.Toast组件新建toast.vue

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

<script>
export default {
  name: 'Toast'
}
</script>

<style>
.container{
  position:fixed;
  top:calc(50% - 20px);
  left:calc（50% - 50px);
  width:100px;
  height:40px;
  text-align:center;
  line-height:40px;
  color:#fff;
  background-color:rgba(0,0,0,0.8);
  box-sizing:border-box;
}
</style>

2. Toast组件新建toast.js

import Vue from 'vue'
import Toast from './toast.vue'

const ToastConstructor = Vue.extend(Toast)

function showToast(text, duration) {
  const toastDom = new ToastConstructor({
    el: document.createElement('div'),
    data() {
      return {
        text: text,
        show: true
      }
    }
  })

  document.body.appendChild(toastDom.$el)

  setTimeout(() => {
    toastDom.show = false
  }, duration)
}

function toastRegistry() {
  Vue.prototype.$toast = showToast
}

export default toastRegistry

3. Home.vue

<template>
  <div @click="openToast">打开toast框</div>
</template>

<script>
export default {
  methods: {
    openToast () {
      console.log('打开toast框')
      this.$toast('已启动', 2000)
    }
  }
}
</script>

4.最后,最终点的需要在main.js应用下toast,才能全局使用

import toast from './components/Toast/toast'
Vue.use(toast)

最后配上一张大致的效果图