@wines/notification v1.5.1

@wines/notification

Notification 通知

用于展现通知提示框，在窗口顶部显示。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Notification",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-notification": "@wines/notification"
  }
}

示例

<wux-notification id="wux-notification" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">Notification</view>
		<view class="page__desc">通知</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="showNotification">Show Notification</wux-button>
		<wux-button block type="light" bind:click="closeNotification">Close Notification</wux-button>
		<wux-button block type="light" bind:click="showNotificationReturn">
			Use return value to close
		</wux-button>
		<wux-button block type="light" bind:click="showNotificationPromise">
			Use promise to know when closed
		</wux-button>
	</view>
</view>

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

Page<PageData, PageCustom>({
  data: {},
  onLoad() {
    /** */
  },
  showNotification() {
    this.closeNotification = $wuxNotification().show({
      image: 'http://cdn.skyvow.cn/logo.png',
      title: '宝宝',
      text: '嘤嘤嘤，人家拿小拳拳捶你胸口!!!',
      data: {
        message: '逗你玩的!!!',
      },
      duration: 3000,
      onClick(data) {
        console.log(data);
      },
      onClose(data) {
        console.log(data);
      },
    });
  },
  showNotificationReturn() {
    if (this.timeout) clearTimeout(this.timeout);

    const hide = $wuxNotification().show({
      image: 'http://cdn.skyvow.cn/logo.png',
      title: '宝宝',
      text: '嘤嘤嘤，人家拿小拳拳捶你胸口!!!',
      data: {
        message: '逗你玩的!!!',
      },
      duration: 3000,
    });

    // eslint-disable-next-line @typescript-eslint/no-implied-eval
    this.timeout = setTimeout(hide, 1000);
  },
  showNotificationPromise() {
    const hide = $wuxNotification().show({
      image: 'http://cdn.skyvow.cn/logo.png',
      title: '宝宝',
      text: '嘤嘤嘤，人家拿小拳拳捶你胸口!!!',
      data: {
        message: '逗你玩的!!!',
      },
      duration: 3000,
    });

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

API

Notification.method

• Notification.show
• Notification.hide

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

const hide = Notification.show()
hide()

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