封装一个的toast弹出框（vue项目）

逆风的方向，更适合飞翔

实现效果

实现步骤

先写出一个toast组件

// Toast.vue
<template>
  <div id="toast" :class="[isActive ? 'active' : '', type]">
    {
  { message }}
  </div>
</template>

<script>
export default {
     
  name: "Toast",
  data() {
     
    return {
     
      message: "",//传递的消息
      isActive: false,//是否处于活跃状态（显示在页面内）
      type: "",//消息样式
      timer1: null,
      timer2: null,