wxc-popup

Weex 弹层组件，支持上下左右四个方向面板弹出

规则

  • 常用于筛选面板组件的包裹组件
  • 从顶部或底部浮出的模态，点击蒙层进行关闭
  • 支持使用者主动关闭

Demo

wxc-popup 弹层 - 图1 wxc-popup 弹层 - 图2

使用方法

  1. <template>
    2.   <div class="wrapper">
    3.     <div class="btn yellow  btn-margin" @click="openBottomPopup">
    4.       <text class="btn-txt">点击弹出底部面板</text>
    5.     </div>
    6.     <wxc-popup popup-color="rgb(92, 184, 92)"
    7.                :show="isBottomShow"
    8.                @wxcPopupOverlayClicked="popupOverlayBottomClick"
    9.                pos="bottom"
    10.                height="400">
    11.       <div class="demo-content">
    12.         <image src="https://img.alicdn.com/tfs/TB1ojYvOXXXXXaOXFXXXXXXXXXX-180-41.png" class="demo-image"></image>
    13.         <text>与 Web App、HTML5 App 或 hybrid App 不同，您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用，上手非常简单。
    14.         </text>
    15.       </div>
    16.     </wxc-popup>
    17.   </div>
    18. </template>
    19.   20. <script>
    21.   import { WxcPopup } from 'weex-ui';
    22.   export default {
    23.     components: { WxcPopup },
    24.     data: () => ({
    25.       isBottomShow: false,
    26.       height: 400
    27.     }),
    28.     methods: {
    29.       openBottomPopup () {
    30.         this.isBottomShow = true;
    31.       },
    32.       //非状态组件，需要在这里关闭
    33.       popupOverlayBottomClick () {
    34.         this.isBottomShow = false;
    35.       }
    36.     }
    37.   };
    38. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
show Boolean Y false 开启打开popup
pos String N bottom 出来位置top/bottom/left/right
height String N 840 弹出层的高度(向上向下时候设置)
width String N 750 弹出层的宽度(向左向右时候设置)
popup-color String N #FFFFFF 弹出层的颜色
stand-out Number N 0 突出边框高度
animation Object N {timingFunction: 'ease-in'} 自定义面板动画
overlay-cfg Object N {} wxc-overlay配置参数
### 事件回调
1. // 需要在@wxcPopupOverlayClicked中设置面板关闭。Click to copy

调用关闭

  1. 在wxc-popup上面绑定ref，然后调用this.$refs.wxcPopup.hide();即可关闭，常用于侧滑筛选面板Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-popup/