Question

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>

提供方法

方法名	说明	参数	备注
Toast	展示提示	options,message	-
Toast.success	展示成功提示	options,message	-
Toast.fail	展示失败提示	options,message	-
Toast.info	展示警告提示	options,message	-
Toast.loading	展示加载提示	options,message	-
Toast.clear	关闭提示	clearAll	-
-	-	-	-

Options

参数	说明	类型	默认值	可选值
type	提示类型	String	text	text,loading,success,fail,html,img
imgUtl	type类型为img时启用	String	-	-
message	内容	String	-	-
position	位置	String	middle	top,bottom,middle
mask	是否显示背景蒙层	Boolean	false	false,true
forbidClick	禁止背景点击	Boolean	false	false,true
duration	展示时长(ms)	Number	3000	值为 0 时，toast 不会消失
-	-	-	-	-