@wines/toptips

Toptips 顶部提示

用于展现简短的提示信息，在窗口顶部显示。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Toptips",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-toptips": "@wines/toptips"
  }
}

示例

<wux-toptips id="wux-toptips" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">Toptips</view>
		<view class="page__desc">顶部提示</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="showToptips1">Show</wux-button>
		<wux-button block type="light" bind:click="showToptips2">Success</wux-button>
		<wux-button block type="light" bind:click="showToptips3">Info</wux-button>
		<wux-button block type="light" bind:click="showToptips4">Warn</wux-button>
		<wux-button block type="light" bind:click="showToptips5">Error</wux-button>
		<wux-button block type="light" bind:click="showToptips6">Use return value to close</wux-button>
		<wux-button block type="light" bind:click="showToptips7">
			Use promise to know when closed
		</wux-button>
	</view>
</view>

import './index.less';
import { $wuxToptips } from '@wines/toptips';
import { PageData, PageCustom } from '@wines/core';

Page<PageData, PageCustom>({
  showToptips1() {
    $wuxToptips().show({
      icon: 'cancel',
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
      success() {
        /** */
      },
    });
  },
  showToptips2() {
    $wuxToptips().success({
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
      success() {
        /** */
      },
    });
  },
  showToptips3() {
    $wuxToptips().info({
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
      success() {
        /** */
      },
    });
  },
  showToptips4() {
    $wuxToptips().warn({
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
      success() {
        /** */
      },
    });
  },
  showToptips5() {
    $wuxToptips().error({
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
      success() {
        /** */
      },
    });
  },
  showToptips6() {
    if (this.timeout) clearTimeout(this.timeout);
    const hide = $wuxToptips().show({
      icon: 'cancel',
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
    });

    this.timeout = setTimeout(() => {
      hide();
    }, 1000);
  },
  showToptips7() {
    const hide = $wuxToptips().show({
      icon: 'cancel',
      hidden: false,
      text: 'Toptips Title',
      duration: 3000,
    });

    // hide.promise.then(() => console.log('success'))
    hide.then(() => console.log('success'));
  },
});

API

| 参数 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | options | object | 配置项 | - | | options.prefixCls | string | 自定义类名前缀 | wux-toptips | | options.classNames | any | 过渡的类名，更多内置过渡效果请参考 AnimationGroup | wux-animate--slideInDown | | options.icon | string | 图标类型 | cancel | | options.hidden | boolean | 是否隐藏图标 | false | | options.text | string | 报错文本 | - | | options.duration | number | 多少毫秒后消失 | 3000 | | options.success | function | 消失后的回调函数 | - |

Toptips.method

• Toptips.show
• Toptips.success
• Toptips.info
• Toptips.warn
• Toptips.error

以上函数调用后，会返回一个引用，可以通过该引用手动关闭组件

const hide = Toptips.show()
hide()

// 返回值支持 promise 接口，可以通过 then/promise.then 方法在关闭后运行 callback
hide.then(callback)
hide.promise.then(callback)