wxc-popup

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

规则

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

Demo

使用方法

<template>
  <div>
    <div @click="openBottomPopup">
      <text>点击弹出底部面板</text>
    </div>
    <wxc-popup popup-color="rgb(92, 184, 92)"
               :show="isBottomShow"
               @wxcPopupOverlayClicked="popupOverlayBottomClick"
               pos="bottom"
               height="400">
      <div>
        <image src="https://img.alicdn.com/tfs/TB1ojYvOXXXXXaOXFXXXXXXXXXX-180-41.png"></image>
        <text>与 Web App、HTML5 App 或 hybrid App 不同，您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用，上手非常简单。
        </text>
      </div>
    </wxc-popup>
  </div>
</template>

<script>
  import { WxcPopup } from 'weex-ui';
  export default {
    components: { WxcPopup },
    data: () => ({
      isBottomShow: false,
      height: 400
    }),
    methods: {
      openBottomPopup () {
        this.isBottomShow = true;
      },
      //非状态组件，需要在这里关闭
      popupOverlayBottomClick () {
        this.isBottomShow = false;
      }
    }
  };
</script>

更详细代码可以参考 demo

可配置参数

事件回调

// 需要在`@wxcPopupOverlayClicked`中设置面板关闭。

调用关闭

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