wxc-popup

    居下，有动画

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

    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.   height: 500rpx;
    34.   line-height: 500rpx;
    35.   background: #ffffff;
    36.   text-align: center;
    37. }
    38. </style>

    居中，有动画

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

    弹出层 popup - 图2

    默认居中，无动画

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

    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>
    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.   }
    41. </style>

    居左，有动画

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

    弹出层 popup - 图4

    居右，有动画

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

    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.   },
    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

    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）