wxc-popup

MinUI 小程序组件 - 弹出层

Install

  1. $ min install @minui/wxc-popup

Demos

居下，有动画

居下的 Popup 可用于弹出框、选择器等

弹出层 popup - 图1

  1. <template>
  2.   <button bindtap="showPopup">居下，有动画</button>
  4.   <wxc-popup class="J_Popup" animation-mode="bottom" align="bottom">
  5.     <view class="popup__content">Hello World</view>
  6.   </wxc-popup>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-popup': '@minui/wxc-popup'
  14.     }
  15.   },
  16.   data: {},
  17.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.   methods: {
  19.     showPopup() {
  20.       let popupComponent = this.selectComponent('.J_Popup');
  21.       popupComponent && popupComponent.show();
  22.     },
  23.     hidePopup() {
  24.       let popupComponent = this.selectComponent('.J_Popup');
  25.       popupComponent && popupComponent.hide();
  26.     }
  27.   }
  28. }
  29. </script>
  31. <style>
  32. .popup__content {
  33.   width: 100%;
  34.   height: 500rpx;
  35.   line-height: 500rpx;
  36.   background: #ffffff;
  37.   text-align: center;
  38. }
  39. </style>

居中，有动画

居中的 Popup 可用于Dialog、确认提醒等

弹出层 popup - 图2

  1. <template>
  2.   <button bindtap="showPopup">居中，有动画</button>
  4.   <wxc-popup class="J_Popup" animation-mode="center" align="center">
  5.     <view class="popup__content">Hello World</view>
  6.   </wxc-popup>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-popup': '@minui/wxc-popup'
  14.     }
  15.   },
  16.   data: {},
  17.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.   methods: {
  19.     showPopup() {
  20.       let popupComponent = this.selectComponent('.J_Popup');
  21.       popupComponent && popupComponent.show();
  22.     },
  23.     hidePopup() {
  24.       let popupComponent = this.selectComponent('.J_Popup');
  25.       popupComponent && popupComponent.hide();
  26.     }
  27.   }
  28. }
  29. </script>
  31. <style>
  32.   .popup__content {
  33.     width: 300rpx;
  34.     height: 300rpx;
  35.     line-height: 300rpx;
  36.     background: #FFFFFF;
  37.     border-radius: 12rpx;
  38.     text-align: center;
  39.   }
  40. </style>

默认居中，无动画

默认的 Popup 样式，内容居中，无动画

弹出层 popup - 图3

  1. <template>
  2.   <button bindtap="showPopup">默认居中，无动画</button>
  4.   <wxc-popup class="J_Popup">
  5.       <view class="popup__content">Hello World</view>
  6.   </wxc-popup>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-popup': '@minui/wxc-popup'
  14.     }
  15.   },
  16.   data: {},
  17.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.   methods: {
  19.     showPopup() {
  20.       let popupComponent = this.selectComponent('.J_Popup');
  21.       /*popupComponent && popupComponent.show();*/
  22.         popupComponent && popupComponent.toggle(true);
  23.     },
  24.     hidePopup() {
  25.       let popupComponent = this.selectComponent('.J_Popup');
  26.       //popupComponent && popupComponent.hide();
  27.         popupComponent && popupComponent.toggle();
  28.     }
  29.   }
  30. }
  31. </script>
  33. <style>
  34.   .popup__content {
  35.     width: 300rpx;
  36.     height: 300rpx;
  37.     line-height: 300rpx;
  38.     background: #FFFFFF;
  39.     border-radius: 12rpx;
  40.     text-align: center;
  41.   }
  42. </style>

居左，有动画

居左的 Popup 可用于左侧的侧边栏、左侧的弹出提醒等

弹出层 popup - 图4

  1. <template>
  2.   <button bindtap="showPopup">居左，有动画</button>
  4.   <wxc-popup class="J_Popup" animation-mode="left" align="left">
  5.     <view class="popup__content">Hello World</view>
  6.   </wxc-popup>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-popup': '@minui/wxc-popup'
  14.     }
  15.   },
  16.   data: {},
  17.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.   methods: {
  19.     showPopup() {
  20.       let popupComponent = this.selectComponent('.J_Popup');
  21.       popupComponent && popupComponent.show();
  22.     },
  23.     hidePopup() {
  24.       let popupComponent = this.selectComponent('.J_Popup');
  25.       popupComponent && popupComponent.hide();
  26.     }
  27.   }
  28. }
  29. </script>
  31. <style>
  32.   .popup__content {
  33.     width: 300rpx;
  34.     height: 100%;
  35.     line-height: 400rpx;
  36.     background: #ffffff;
  37.     text-align: center;
  38.   }
  39. </style>

居右，有动画

居右的 Popup 可用于右侧的侧边栏、右侧的弹出提醒等

弹出层 popup - 图5

  1. <template>
  2.   <button bindtap="showPopup">居右，有动画</button>
  4.   <wxc-popup class="J_Popup" animation-mode="right" align="right">
  5.     <view class="popup__content">Hello World</view>
  6.   </wxc-popup>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-popup': '@minui/wxc-popup'
  14.     }
  15.   },
  16.   data: {},
  17.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.   methods: {
  19.     showPopup() {
  20.       let popupComponent = this.selectComponent('.J_Popup');
  21.       popupComponent && popupComponent.show();
  22.     },
  23.     hidePopup() {
  24.       let popupComponent = this.selectComponent('.J_Popup');
  25.       popupComponent && popupComponent.hide();
  26.     }
  27.   }
  28. }
  29. </script>
  31. <style>
  32.   .popup__content {
  33.     width: 300rpx;
  34.     height: 100%;
  35.     line-height: 400rpx;
  36.     background: #ffffff;
  37.     text-align: center;
  38.   }
  39. </style>

居上，有动画

居上的 Popup 可用于顶部提醒、顶部菜单等功能

弹出层 popup - 图6

  1. <template>
  2.   <button bindtap="showPopup">居上，有动画</button>
  4.   <wxc-popup class="J_Popup" animation-mode="top" align="top">
  5.     <view class="popup__content">Hello World</view>
  6.   </wxc-popup>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-popup': '@minui/wxc-popup'
  14.     }
  15.   },
  16.   data: {},
  17.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.   methods: {
  19.     showPopup() {
  20.       let popupComponent = this.selectComponent('.J_Popup');
  21.       popupComponent && popupComponent.show();
  22.     },
  23.     hidePopup() {
  24.       let popupComponent = this.selectComponent('.J_Popup');
  25.       popupComponent && popupComponent.hide();
  26.     }
  27.   }
  28. }
  29. </script>
  31. <style>
  32.   .popup__content {
  33.     width: 100%;
  34.     height: 200rpx;
  35.     line-height: 200rpx;
  36.     text-align: center;
  37.     background: #FFFFFF;
  38.   }
  39. </style>

API

Popup【props】

名称描述
animation-mode【说明】动画样式【类型】String【默认值】""【可选值】none, center, top, bottom, left, right
align【说明】占位位置【类型】String【默认值】""【可选值】center, top, bottom, left, right
status【说明】默认状态【类型】String【默认值】""[可选值】hide, show
locked【说明】遮罩层是否设置锁定态。【类型】String【默认值】"hide" [可选值]："true"，点击遮罩层背景部分不会关闭遮罩（点击子节点部分关闭遮罩）。"hide"，点击遮罩层背景部分关闭遮罩（点击子节点部分不会关闭遮罩）。

Popup【methods】

名称描述
show【说明】显示 popup 【params】void【return】void
hide【说明】隐藏 popup 【params】void【return】void
toggle【说明】切换 popup 的可见状态。【params】switch: Boolean。可选。【return】void
地址
popup 组件文档 https://meili.github.io/min/docs/minui/index.html#popup
popup 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-popup
MinUI 组件库 https://github.com/meili/minui

Preview

popup

ChangeLog

v1.0.7（2018.03.29)

  • 补充文档，增加 locked 属性的说明

v1.0.6（2018.01.09)

  • z-index 层级规范方案修改

v1.0.3（2018.01.04）

  • 增加toggle方法，规范z-index层级

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本