android-cloud-H5/plugins/toast/toast.vue

<template>
  <v-snackbar
    app
    class="toast"
    :value.sync="value"
    color="rgba(0,0,0,.8)"
    v-bind="attrs"
    @input="!$event && destroy()"
  >
    <v-icon v-if="icon" left>{{ icon }}</v-icon>
    <span>{{ message }}</span>
  </v-snackbar>
</template>

<script>
export default {
  name: 'Toast',
  props: {
    message: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      value: false,
    };
  },
  computed: {
    attrs() {
      return Object.entries(this.$options.propsData).reduce(
        (o, [key, value]) => {
          !Object.hasOwn(this.$props, key) && (o[key] = value);
          return o;
        },
        {},
      );
    },
  },
  mounted() {
    this.$parent.$el.append(this.$el);
    this.value = true;
  },
  destroyed() {
    this.$el.remove();
  },
  methods: {
    destroy() {
      setTimeout(() => this.$destroy(), 1000);
    },
  },
};
</script>