@wines/popup

@wines/popup

Popup 弹出框

用于显示弹出框。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Popup",
  "usingComponents": {
    "wux-cell-group": "@wines/cell-group",
    "wux-cell": "@wines/cell",
    "wux-button": "@wines/button",
    "wux-popup": "@wines/popup"
  }
}

示例

<wux-popup
 closable
 visible="{{ visible1 }}"
 title="Delete"
 content="Are you sure???"
 bind:close="onClose1"
 bind:closed="onClosed1"
>
	<view slot="footer" class="popup__button" bindtap="close1">OK</view>
</wux-popup>
<wux-popup
 position="bottom"
 safeArea
 visible="{{ visible2 }}"
 bind:close="onClose2"
>
	<wux-cell-group title="Your fathers">
		<wux-cell hover-class="none" title="Jack Ma" />
		<wux-cell hover-class="none" title="Pony" />
		<wux-cell hover-class="none">
			<wux-button block type="balanced" bindtap="close2">Yes</wux-button>
		</wux-cell>
	</wux-cell-group>
</wux-popup>
<view class="page">
	<view class="page__hd">
		<view class="page__title">Popup</view>
		<view class="page__desc">弹出框</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="open1">Default</wux-button>
		<wux-button block type="light" bind:click="open2">Popup</wux-button>
	</view>
</view>

import './index.less';
Page({
  data: {
    visible1: false,
    visible2: false,
  },
  open1() {
    this.setData({
      visible1: true,
    });
  },
  open2() {
    this.setData({
      visible2: true,
    });
  },
  close1() {
    this.setData({
      visible1: false,
    });
  },
  close2() {
    this.setData({
      visible2: false,
    });
  },
  onClose(key) {
    console.log('onClose');
    this.setData({
      [key]: false,
    });
  },
  onClose1() {
    this.onClose('visible1');
  },
  onClose2() {
    this.onClose('visible2');
  },
  onClosed1() {
    console.log('onClosed');
  },
});

API

Popup props

Popup externalClasses