组件代码 Toast.vue

<!--
 * @Description: 提示组件
 * @Version: 1.0.0
 * @Autor: susu<nongxuewang@qq.com>
 * @Date: 2022-07-07 23:17:35
 * @LastEditTime: 2022-07-20 14:06:09
 -->
<template>
  <div class="toast" :style="{ background: background }">{{ message }}</div>
</template>
 
<script>
import { reactive } from 'vue'
export default {
  name: 'Toast',
  props: ['message', 'status'],
  metheds: {
    status2color: function (status){
      let color = '#5FB878';
      switch (status) {
        case 'error':
          color = '#FF5722';
          break;
        case 'success':
          color = '#5FB878';
          break;
        case 'warn':
          color = '#FFB800';
          break;
        case 'info':
          color = '#1E9FFF';
          break;
        case 'dark':
          color = '#393D49';
          break;
      }
      return color;
    }
  },
  computed: {
    background() {
      return this.status2color(this.status);
    }
  }
}
export const useToastEffect = () => {
  const toastData = reactive({
    showToast: false,
    toastMessage: '',
    status: '',
  })
  const showToast = (message, status, timeout) => {
    toastData.showToast = true
    toastData.toastMessage = message
    toastData.status = status;
    if (!timeout) { timeout = 2000; }
    setTimeout(() => {
      toastData.showToast = false
      toastData.toastMessage = ''
    }, timeout)
  }
  return { toastData, showToast }
}
</script>
 
<style>
.toast {
  position: fixed;
  z-index: 2000;
  right: 0;
  padding-right: 5%;
  top: 100px;
  transition: all .5s;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 5px;
  color: #FFF;
  background: rgba(17, 17, 17, 0.7);
  height: 45px;
  line-height: 45px;
  padding: 0 15px;

}
</style>

使用组件

<template>
  <Toast v-if="toastData.showToast" :message="toastData.toastMessage" :status="toastData.status" />
</template>
<script>
  import Toast, { useToastEffect } from '@/components/layui/Toast.vue';
  export default {
  setup() {
    const { toastData, showToast } = useToastEffect();
    return { toastData, showToast };
  },
  methods: { // 定义事件方法
    test: function (type) {
      this.showToast("发生错误", 'warn');
      that.showToast("保存成功");
    }
  },
  components: {
    Toast
  },
};
</script>