@wines/prompt v1.5.1

@wines/prompt

Prompt 提示信息

用于展现异常流提示信息。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Prompt",
  "usingComponents": {
    "wux-prompt": "@wines/prompt",
    "wux-tabs": "@wines/tabs",
    "wux-tab": "@wines/tabs/tab"
  }
}

import './index.less';

Page({
  data: {
    activeKey: '0',
    msg1: {
      title: '空空如也',
      text: '暂时没有相关数据',
    },
    msg2: {
      icon: '/native/iconfont-order.png',
      title: '您还没有相关的订单',
      text: '可以去看看有哪些想买',
      buttons: [
        {
          text: '随便逛逛',
        },
      ],
    },
    msg3: {
      icon: 'http://cdn.skyvow.cn/logo.png',
      title: '授权失败',
      text: '获取用户信息失败，请重新授权',
      buttons: [
        {
          text: '重新授权',
          openType: 'getUserInfo',
        },
      ],
    },
  },
  onChange(e) {
    console.log('onChange', e);
    this.setData({
      activeKey: e.detail.key,
    });
  },
  buttonClicked(e) {
    console.log('buttonClicked', e);
  },
  onGotUserInfo(e) {
    console.log('onGotUserInfo', e);
  },
});

示例

<view class="page">
	<view class="page__bd">
		<wux-tabs current="{{ activeKey }}" controlled bind:change="onChange">
			<wux-tab key="0" title="全部" />
			<wux-tab key="1" title="待收货" />
			<wux-tab key="2" title="待评价" />
		</wux-tabs>
		<view class="content" hidden="{{ activeKey !== '0' }}">
			<wux-prompt visible="{{ activeKey === '0' }}" title="{{ msg1.title }}" text="{{ msg1.text }}" />
		</view>
		<view class="content" hidden="{{ activeKey !== '1' }}">
			<wux-prompt
			 visible="{{ activeKey === '1' }}"
			 icon="{{ msg2.icon }}"
			 title="{{ msg2.title }}"
			 text="{{ msg2.text }}"
			 buttons="{{ msg2.buttons }}"
			 bind:click="buttonClicked"
			/>
		</view>
		<view class="content" hidden="{{ activeKey !== '2' }}">
			<wux-prompt
			 visible="{{ activeKey === '2' }}"
			 icon="{{ msg3.icon }}"
			 title="{{ msg3.title }}"
			 text="{{ msg3.text }}"
			 buttons="{{ msg3.buttons }}"
			 bind:getuserinfo="onGotUserInfo"
			/>
		</view>
	</view>
</view>

API

Prompt props

Prompt externalClasses