Toast 提示

main.js

import Vue from "vue";
import { Toast } from "feui";
window.Toast = Toast;

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",
    // imgUrl: "//feui.oschina.io/docs/images/logo.png",
    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>

提供方法

Options