Toast 吐司

轻提示。

基本用法

文字提示

export default {
  mounted() {
    this.$toast.text('提示信息');
  }
}

成功提示

export default {
  mounted() {
    this.$toast.success('操作成功！');
  }
}

失败提示

export default {
  mounted() {
    this.$toast.fail('操作失败！');
  }
}

警告提示

export default {
  mounted() {
    this.$toast.warn('确定删除？');
  }
}

加载提示

// 带文案，显示透明遮罩层（默认），自动消失
this.$toast.loading('加载中...',{ 
    duration:3000
});
//带文案，显示半透明遮罩层，自动消失，点击遮罩层后消失
this.$toast.loading('加载中...',{ 
    duration:3000,
    coverColor: "rgba(0,0,0,0.5)",
    closeOnClickOverlay: true
});
//不会自动消失(默认)，不带遮罩层
this.loading = this.$toast.loading({
    cover: false
});
//手动关闭上面的Loading
this.loading.hide();

自定义样式

//自定义背景颜色/透明度
this.$toast.text('自定义背景颜色/透明度',{
    bgColor:'rgba(50, 50, 50, 0.9)'
});
//自定义class
this.$toast.text('自定义class',{
    customClass:'my-class'
});
//自定义Icon
this.$toast.text('自定义Icon',{
    icon:"https://img13.360buyimg.com/imagetools/jfs/t1/98294/28/14470/22072/5e65ba08E865683aa/ded7441bdd098511.png"
});

共享实例

如果不设置id，多个Toast将默认拥有相同的id，它们将共享一个实例（loading类型与其他类型实例不共享），新的内容和设置将取代旧的，多个Toast不能同时出现。如果不需要共享实例，可以给其设置id。

//二者id不同，不会共享一个实例
this.$toast.success(msg,{
    id:123
});
this.$toast.text(msg,{
    id:321,
    duration:4000
});

支持在JS模块中导入使用

import { Toast } from "@nutui/nutui";
Toast.text('在js模块中使用');
// 返回实例，可以手动调用实例中的hide方法关闭提示
const toast = Toast.loading('在js模块中使用');
toast.hide();

修改默认配置

通过Toast.setDefaultOptions函数可以全局修改 Toast 的默认配置，值得注意的是，loading无法支持默认配置的修改和重置。

// 更改所有Toast展示时长设置为5000毫秒
Toast.setDefaultOptions({
    duration: 5000,
    coverColor: "rgba(0, 0, 0, 0.2)",
    closeOnClickOverlay: true,
    cover: true
});
// 重置所有 Toast 的默认配置
Toast.resetDefaultOptions();
// 更改所有文字提示默认设置
Toast.setDefaultOptions("text", {
    size: "large",
    cover: true,
    coverColor: "rgba(0, 0, 0, 0.2)",
    duration: 3000,
    closeOnClickOverlay: true
});
// 重置 text Toast 的默认配置
Toast.resetDefaultOptions("text");

API

Options