Toast 轻提示

使用指南

组件介绍

toast 组件提供各种 轻提示

引入方式

import { Toast } from 'feart';

methods: {
  showSuccess() {
    Toast.success({
      duration: 1500,
      message: "操作成功"
    });
  },
  showError() {
    Toast.fail({
      duration: 1500,
      message: "失败提示"
    });
  },
  showWarn() {
    Toast.info({
      duration: 1500,
      message: "操作警告"
    });
  },
  showLoading() {
    Toast.loading({ duration: 1501, mask: true });
  },
  showText() {
    Toast({
      duration: 1500,
      message: "显示文字咯咯咯.."
    });
  },
  Toast({
    duration: 1500,
    forbidClick: true, // 禁用背景点击
    type: "img",
    message: "显示文字<p style='text-align:center'>1s</p>"
  });
  gaoji() {
    const toast = Toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true, // 禁用背景点击
      message: "倒计时 3 秒"
    });
    let second = 3;
    const timer = setInterval(() => {
      second--;
      if (second) {
          toast.message = `倒计时 ${second} 秒`;
      } else {
          clearInterval(timer);
          Toast.clear();
      }
    }, 1000);
  }
}

代码演示

成功提示

<fe-button @click.native="showSuccess">成功提示</fe-button>

失败提示

<fe-button @click.native="showError">失败提示</fe-button>

警告提示

<fe-button @click.native="showWarn">警告提示</fe-button>

Loading

<fe-button @click.native="showText">Loading</fe-button>

自定义图标

<fe-button @click.native="img">自定义图标</fe-button>

Loading

<fe-button @click.native="showLoading">Loading</fe-button>

高级用法

<fe-button @click.native="gaoji">高级用法</fe-button>

组件内调用

引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 $toast 方法，便于在组件内调用。

 mounted() {
    this.$toast('组件内调用');
  }

多 Toast 调用

本组件采用单例模式编写，同一时间内只会存在一个 Toast，若想弹出多个，可以参考下面的 API

Toast.allowMultiple();

const toast = Toast('Toast');
const toastSuccess = Toast.success({
  duration: 1500,
  message: '操作成功',
});

toast.clear();
toastSuccess.clear();

API

Options