Popup 弹出框

用于显示弹出框。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Popup",
  3.     "usingComponents": {
  4.         "wux-cell-group": "../../dist/cell-group/index",
  5.         "wux-cell": "../../dist/cell/index",
  6.         "wux-button": "../../dist/button/index",
  7.         "wux-popup": "../../dist/popup/index"
  8.     }
  9. }

示例

  1. <wux-popup closable visible="{{ visible1 }}" title="Delete" content="Are you sure???" bind:close="onClose1" bind:closed="onClosed1">
  2.     <view slot="footer" class="popup__button" bindtap="close1">OK</view>
  3. </wux-popup>
  5. <wux-popup position="bottom" visible="{{ visible2 }}" bind:close="onClose2">
  6.     <wux-cell-group title="Your fathers">
  7.         <wux-cell hover-class="none" title="Jack Ma"></wux-cell>
  8.         <wux-cell hover-class="none" title="Pony"></wux-cell>
  9.         <wux-cell hover-class="none">
  10.             <wux-button block type="balanced" bindtap="close2">Yes</wux-button>
  11.         </wux-cell>
  12.     </wux-cell-group>
  13. </wux-popup>
  15. <view class="page">
  16.     <view class="page__hd">
  17.         <view class="page__title">Popup</view>
  18.         <view class="page__desc">弹出框</view>
  19.     </view>
  20.     <view class="page__bd page__bd_spacing">
  21.         <wux-button block type="light" bind:click="open1">Default</wux-button>
  22.         <wux-button block type="light" bind:click="open2">Popup</wux-button>
  23.     </view>
  24. </view>
  1. Page({
  2.     data: {
  3.         visible1: false,
  4.         visible2: false,
  5.     },
  6.     open1() {
  7.         this.setData({
  8.             visible1: true,
  9.         })
  10.     },
  11.     open2() {
  12.         this.setData({
  13.             visible2: true,
  14.         })
  15.     },
  16.     close1() {
  17.         this.setData({
  18.             visible1: false,
  19.         })
  20.     },
  21.     close2() {
  22.         this.setData({
  23.             visible2: false,
  24.         })
  25.     },
  26.     onClose(key) {
  27.         console.log('onClose')
  28.         this.setData({
  29.             [key]: false,
  30.         })
  31.     },
  32.     onClose1() {
  33.         this.onClose('visible1')
  34.     },
  35.     onClose2() {
  36.         this.onClose('visible2')
  37.     },
  38.     onClosed1() {
  39.         console.log('onClosed')
  40.     },
  41. })

视频演示

Popup

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
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 关闭按钮样式类