//模板和js代码
<template>
  <div class="toast">
    <div
        v-if="visible"
        :class="`toast-box toast-box-${options.type}`"
        :style="`animationDuration: ${this.options.duration}s`"
    >
      <i :class="`iconfont icon-${options.type} tip-icon ${options.type}`"></i>
      <span :class="`text-area ${options.type}`">{{ options.message }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      visible: false,
      defaultOptions: {
        type: "info",
        message: "",
        duration: 3,
      },//默认配置项，在调用实例内的方法时候，默认使用该配置项内的选项，若有需要自定义的直接重写属性覆盖即可
      options: {
        type: "",
        message: "",
        duration: 3,
      },//显示配置项
    };
  },
  methods: {},
};
</script>