Press UI

# Toast 轻提示

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

# 引入

注意，press-toast 节点需要埋在页面下，否则小程序中找不到。H5 环境可以不预埋，找不到节点时，会动态创建。

<press-toast id="press-toast" />

import PressToast from 'press-ui/press-toast/press-toast';

export default {
  components: {
    PressToast,
  }
}

# 代码演示

# 文字提示

import Toast from 'press-ui/press-toast';

Toast('我是提示文案，建议不超过十五字~');

# 加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({
  message: '加载中...',
  forbidClick: true,
});

// 自定义加载图标
Toast.loading({
  message: '加载中...',
  forbidClick: true,
  loadingType: 'spinner',
});

# 成功/失败提示

Toast.success('成功文案');
Toast.fail('失败文案');

# 动态更新提示

const toast = Toast.loading({
  duration: 0, // 持续展示 toast
  forbidClick: true,
  message: '倒计时 3 秒',
  selector: '#custom-selector',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.setData({
      message: `倒计时 ${second} 秒`,
    });
  } else {
    clearInterval(timer);
    Toast.clear();
  }
}, 1000);

<press-toast id="custom-selector" />

# OnClose 回调函数

Toast({
  type: 'success',
  message: '提交成功',
  onClose: () => {
    console.log('执行OnClose函数');
  },
});

# API

# 方法

方法名 参数 返回值 介绍
Toast options | message toast 实例 展示提示
Toast.loading options | message toast 实例 展示加载提示
Toast.success options | message toast 实例 展示成功提示
Toast.fail options | message toast 实例 展示失败提示
Toast.clear clearAll void 关闭提示
Toast.setDefaultOptions options void 修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions - void 重置默认配置，对所有 Toast 生效

# Options

参数 说明 类型 默认值
type 提示类型，可选值为 loading success fail html string text
position 位置，可选值为 top middle bottom string middle
message 内容 string ''
mask 是否显示遮罩层 boolean false
forbidClick 是否禁止背景点击 boolean false
loadingType 加载图标类型, 可选值为 spinner string circular
zIndex z-index 层级 number 1000
duration 展示时长(ms)，值为 0 时，toast 不会消失 number 2000
selector 自定义选择器 string press-toast
context 选择器的选择范围，可以传入自定义组件的 this 作为上下文 object 当前页面
onClose 关闭时的回调函数 function -

# Slot

名称 说明
- 自定义内容

# 在线调试

横屏

← Transition →