Toast 轻提示

概述

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

使用指南

在 .json 中引入组件

"usingComponents": {
    "i-toast": "../../dist/toast/index"
}

示例

Toast 组件主要依靠 JavaScript 主动调用，所以只需在 wxml 中添加一个组件，并设置 id，其余配置在 .js 里完成。

如果只有一个 Toast 组件，建议将 id 设置为 #toast，否则需要额外配置 selector 属性来指定。

<i-button type="ghost" bind:click="handleText">只显示文本</i-button>
<i-button type="ghost" bind:click="handleSuccess">成功</i-button>
<i-button type="ghost" bind:click="handleWarning">警告</i-button>
<i-button type="ghost" bind:click="handleError">错误</i-button>
<i-button type="ghost" bind:click="handleLoading">Loading</i-button>
<i-button type="ghost" bind:click="handleIcon">使用图标</i-button>
<i-button type="ghost" bind:click="handleImage">使用自定义图片</i-button>
<i-button type="ghost" bind:click="handleMask">无遮罩层</i-button>
<i-toast id="toast" />

const { $Toast } = require('../../dist/base/index');
Page({
    handleText () {
        $Toast({
            content: '这是文本提示'
        });
    },
    handleSuccess () {
        $Toast({
            content: '成功的提示',
            type: 'success'
        });
    },
    handleWarning () {
        $Toast({
            content: '警告的提示',
            type: 'warning'
        });
    },
    handleError () {
        $Toast({
            content: '错误的提示',
            type: 'error'
        });
    },
    handleLoading () {
        $Toast({
            content: '加载中',
            type: 'loading'
        });
    },
    handleIcon () {
        $Toast({
            content: '使用内置的图标',
            icon: 'praise'
        });
    },
    handleImage () {
        $Toast({
            content: '使用自定义图片',
            image: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
        });
    },
    handleMask () {
        $Toast({
            content: '5秒后自动关闭',
            icon: 'prompt',
            duration: 0,
            mask: false
        });
        setTimeout(() => {
            $Toast.hide();
        }, 5000);
    },
});

API

$Toast properties