Toast轻提醒

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-load-more": "/miniprogram_npm/vtuweapp/loadMore/vtu-load-more"
    3. }
    4.

    代码演示

    文字提示

    1. <vtu-btn bind:click="alert1" type="primary" custom-class="dialog-btn">文字提示</vtu-btn>
    2. <vtu-btn bind:click="alert2" type="success" custom-class="dialog-btn">长文字提示</vtu-btn>
    3. <vtu-toast id="Vtu-Toast"></vtu-toast>
    5. import Toast from "../../../miniprogram_npm/vtuweapp/toast/vtu-index";
    6. Page({
    7.   data: {},
    9.   alert1() {
    10.     Toast('提示内容').then(data => {
    11.       Toast('已关闭');
    12.     })
    13.   },
    15.   alert2() {
    16.     Toast('这是一条长文字提示，超过一定字数就会换行');
    17.   }
    18. });
    19.  
    20.

    加载提示

    1. <vtu-btn bind:click="alert3" type="primary" custom-class="dialog-btn">加载提示</vtu-btn>
    2. <vtu-toast id="Vtu-Toast"></vtu-toast>
    4. import Toast from "../../../miniprogram_npm/vtuweapp/toast/vtu-index";
    5. Page({
    6.   data: {},
    7.   alert3() {
    8.     Toast().loading('成功文案');
    9.   }
    10. });
    11.

    状态提示

    1. <vtu-btn bind:click="alert4" type="success" custom-class="dialog-btn">成功提示</vtu-btn>
    2. <vtu-btn bind:click="alert5" type="warning" custom-class="dialog-btn">警告提示</vtu-btn>
    3. <vtu-btn bind:click="alert6" type="danger" custom-class="dialog-btn">失败提示</vtu-btn>
    4. <vtu-toast id="Vtu-Toast"></vtu-toast>
    6. import Toast from "../../../miniprogram_npm/vtuweapp/toast/vtu-index";
    7. Page({
    8.   data: {},
    9.   alert5() {
    10.     Toast().warning('警告文案');
    11.   },
    12.   alert6() {
    13.     Toast().error('失败文案');
    14.   }
    15. });
    16.

    高级用法

    1. <vtu-btn bind:click="alert7" type="primary" custom-class="dialog-btn">自定义icon</vtu-btn>
    2. <vtu-btn bind:click="alert8" type="warning" custom-class="dialog-btn">带遮罩</vtu-btn>
    3. <vtu-btn bind:click="alert9" type="success" custom-class="dialog-btn">自定义关闭时间</vtu-btn>
    4. <vtu-toast id="Vtu-Toast"></vtu-toast>
    6. import Toast from "../../../miniprogram_npm/vtuweapp/toast/vtu-index";
    7. Page({
    8.   data: {},
    9.   alert7() {
    10.     Toast().alert({
    11.       icon: 'iconfont icon-biaoxing',
    12.       title: '自定义图标',
    13.       rotate: true
    14.     });
    15.   },
    16.   alert8() {
    17.     Toast().alert({
    18.       icon: 'iconfont icon-biaoxing',
    19.       title: '带遮罩',
    20.       mask: true
    21.     });
    22.   },
    23.   alert9() {
    24.     Toast().alert({
    25.       icon: 'iconfont icon-biaoxing',
    26.       title: '自定义关闭时间',
    27.       duration: 5000
    28.     }).then(data => {
    29.       Toast('已关闭');
    30.     })
    31.   }
    32. });
    33.

    组件参数

    Toast 轻提醒 - 图1