@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

| 参数 | 类型 | 描述 | 默认值 | | ------------------ | --------------- | --------------------------------------------------------- | ----------- | | prefixCls | string | 自定义类名前缀 | wux-popup | | animationPrefixCls | string | 自定义 animation 类名前缀 | wux-animate | | title | string | 标题 | - | | content | string | 内容 | - | | extra | string | 底部内容 | - | | position | string | 弹出层位置信息，可选值为 center、top、right、bottom、left | center | | wrapStyle | string,object | 自定义 wrap 样式 | - | | closable | boolean | 是否显示关闭按钮 | false | | mask | boolean | 是否显示蒙层 | true | | maskClosable | boolean | 点击蒙层是否允许关闭 | true | | visible | boolean | 是否可见 | false | | disableScroll | boolean | 是否禁用 popup 弹窗的触摸滑动穿透 | true | | zIndex | number | 设置蒙层的 z-index | 1000 | | hasHeader | boolean | 是否显示头部内容 | true | | hasFooter | boolean | 是否显示底部内容 | true | | bind:close | function | 点击关闭按钮或蒙层的回调函数 | - | | bind:closed | function | 关闭后的回调函数 | - |

Popup externalClasses

| 名称 | 描述 | | ----------------- | -------------- | | wux-class | 根节点样式类 | | wux-content-class | 主容器样式类 | | wux-header-class | 头部内容样式类 | | wux-body-class | 主体内容样式类 | | wux-footer-class | 底部内容样式类 | | wux-close-class | 关闭按钮样式类 |