在Vue中创建物化toast操作

npm install vuetify

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

<template>
  <v-snackbar v-model="show" :timeout="timeout" :color="color">
    {{ message }}
  </v-snackbar>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    timeout: {
      type: Number,
      default: 3000
    },
    color: {
      type: String,
      default: 'success'
    }
  },
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
  }
}
</script>

<template>
  <div>
    <v-btn @click="showToast">显示toast消息</v-btn>
    <toast :message="toastMessage" :color="toastColor"></toast>
  </div>
</template>

<script>
import Toast from './Toast.vue'

export default {
  components: {
    Toast
  },
  data() {
    return {
      toastMessage: '操作成功',
      toastColor: 'success'
    }
  },
  methods: {
    showToast() {
      // 执行一些操作
      // ...
      
      // 显示toast消息
      this.toastMessage = '操作成功'
      this.toastColor = 'success'
    }
  }
}
</script>