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>
  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>

更详细代码可以参考 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`中设置面板关闭。

调用关闭

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

Please feel free to use and contribute to the development.

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