Popup 弹出层

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-popup": "wuss-weapp/w-popup/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Popup" desc="弹出层" />
  3. <w-pane desc="Position" />
  5. <w-button type="info" bind:onClick="handleClick1">Top</w-button>
  6. <w-popup
  7.  visible="{{ popup1 }}"
  8.  position="top"
  9.  height="250px"
  10.  bind:onClose="handleClose"
  11. >
  12.     <scroll-view scroll-y class="scroll-view-x">
  13.         <view
  14.          class=""
  15.          wx:for="{{50}}"
  16.          wx:key="index"
  17.          hover-class="none"
  18.          hover-stop-propagation="false"
  19.         >
  20.             {{ index }}
  21.         </view>
  22.     </scroll-view>
  23. </w-popup>
  24. <w-button type="info" bind:onClick="handleClick2">Bottom</w-button>
  25. <w-popup
  26.  visible="{{ popup2 }}"
  27.  position="bottom"
  28.  height="250px"
  29.  bind:onClose="handleClose"
  30. >
  31.     <scroll-view scroll-y class="scroll-view-x">
  32.         <view
  33.          class=""
  34.          wx:for="{{50}}"
  35.          wx:key="index"
  36.          hover-class="none"
  37.          hover-stop-propagation="false"
  38.         >
  39.             {{ index }}
  40.         </view>
  41.     </scroll-view>
  42. </w-popup>
  43. <w-button type="info" bind:onClick="handleClick3">Left</w-button>
  44. <w-popup
  45.  visible="{{ popup3 }}"
  46.  position="left"
  47.  bind:onClose="handleClose"
  48. >
  49.     <scroll-view scroll-y class="scroll-view-y">
  50.         <view
  51.          class=""
  52.          wx:for="{{50}}"
  53.          wx:key="index"
  54.          hover-class="none"
  55.          hover-stop-propagation="false"
  56.         >
  57.             {{ index }}
  58.         </view>
  59.     </scroll-view>
  60. </w-popup>
  61. <w-button type="info" bind:onClick="handleClick4">Right</w-button>
  63. <w-popup
  64.  visible="{{ popup6 }}"
  65.  position="main"
  66.  height="45%"
  67.  width="72%"
  68.  padding="0"
  69.  bind:onClose="handleClose"
  70.  wuss-class="wuss-popup"
  71. >
  72.   <view class="demo-popup-6">
  73.     <w-qr-code size="200" text="hello world" />
  74.     <w-icon bindtap="handleClose" type="close" color="#999999" wuss-class="w-icon" />
  75.   </view>
  76. </w-popup>
  77. <w-button type="info" bind:onClick="handleClick6">Main</w-button>
  79. <w-popup
  80.  visible="{{ popup4 }}"
  81.  position="right"
  82.  bind:onClose="handleClose"
  83. >
  84.     <scroll-view scroll-y class="scroll-view-y">
  85.         <view
  86.          class=""
  87.          wx:for="{{50}}"
  88.          wx:key="index"
  89.          hover-class="none"
  90.          hover-stop-propagation="false"
  91.         >
  92.             {{ index }}
  93.         </view>
  94.     </scroll-view>
  95. </w-popup>
  97. <w-pane desc="Disabled MaskCancel" />
  99. <w-button type="info" bind:onClick="handleClick5">Info</w-button>
  100. <w-popup
  101.  maskCancel="{{ false }}"
  102.  visible="{{ popup5 }}"
  103.  position="bottom"
  104.  height="250px"
  105.  bind:onClose="handleClose"
  106. >
  107.     <scroll-view scroll-y class="scroll-view-x">
  108.         <view
  109.          class=""
  110.          wx:for="{{50}}"
  111.          wx:key="index"
  112.          hover-class="none"
  113.          hover-stop-propagation="false"
  114.         >
  115.             下拉点击关闭按钮{{ index }}
  116.         </view>
  117.       <w-button type="info" bind:onClick="handleClose">关闭</w-button>
  118.     </scroll-view>
  119. </w-popup>
  1. data: {
  2.   popup1: false,
  3.   popup2: false,
  4.   popup3: false,
  5.   popup4: false,
  6.   popup5: false,
  7.   popup6: false,
  8. },
  9. handleClose() {
  10.   this.setData({
  11.     popup1: false,
  12.     popup2: false,
  13.     popup3: false,
  14.     popup4: false,
  15.     popup5: false,
  16.     popup6: false,
  17.   });
  18. },
  19. handleClick1() {
  20.   this.setData({ popup1: true });
  21. },
  22. handleClick2() {
  23.   this.setData({ popup2: true });
  24. },
  25. handleClick3() {
  26.   this.setData({ popup3: true });
  27. },
  28. handleClick4() {
  29.   this.setData({ popup4: true });
  30. },
  31. handleClick5() {
  32.   this.setData({ popup5: true });
  33. },
  34. handleClick6() {
  35.   this.setData({ popup6: true });
  36. },
  1. .scroll-view-x {
  2.   height: 250px;
  3.   width: 100%;
  4. }
  6. .scroll-view-y {
  7.   height: 100%;
  8. }

API

Attribute 属性

属性说明类型默认值
visible组件是否可见booleanfalse
position弹出位置,可选值:[left,right,top,bottom,main]string-
mask是否开启遮罩层booleanfalse
maskIndex当前组件的 z-index 值number-
width内容区的宽度，当 type 的值为 left,right 时生效string-
height内容区的高度,当 type 的值为 top,bottom 时生效string-
padding内容区的内边距string-
stylesstring-
zIndexnumber-
maskCancel点击遮罩层可否关闭booleanfalse

Event 事件

事件名说明参数
onClosepopup关闭时的回调——

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class无
wuss-popup-content无