wxc-mask

Weex 弹层组件，可定制内容

Demo

wxc-mask 弹出层 - 图1 wxc-mask 弹出层 - 图2

使用方法

  1. <template>
  2.   <div class="wrapper">
  3.     <div class="btn" @click="openMask">
  4.       <text class="btn-txt">点击弹出动画面板</text>
  5.     </div>
  6.     <div class="btn btn-margin yellow" @click="openNoAnimationMask">
  7.       <text class="btn-txt">点击弹出无动画面板</text>
  8.     </div>
  9.     <wxc-mask height="800"
  10.               width="702"
  11.               border-radius="0"
  12.               duration="200"
  13.               mask-bg-color="#FFFFFF"
  14.               :has-animation="hasAnimation"
  15.               :has-overlay="true"
  16.               :show-close="true"
  17.               :show="show"
  18.               @wxcMaskSetHidden="wxcMaskSetHidden">
  19.       <div class="content">
  20.         <div class="demo-title">
  21.           <text class="title">Weex帮助你构建原生应用</text>
  22.         </div>
  23.         <text class="content-text">
  24.           与 Web App、HTML5 App 或 hybrid App 不同，您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript
  25.           可以构建原生应用，上手非常简单。但实际上，应用的底层是 Objective-C 或 Java， 同时，Weex 提供很多 native 组件或模块供开发人员使用。
  26.         </text>
  27.       </div>
  28.     </wxc-mask>
  29.   </div>
  30. </template>
  32. <script>
  33.   import { WxcMask } from 'weex-ui';
  34.   export default {
  35.     components: { WxcMask },
  36.     data: () => ({
  37.       show: false,
  38.       overlayCanClose: true,
  39.       isFalse: false,
  40.       hasAnimation: true
  41.     }),
  42.     methods: {
  43.       openMask (e) {
  44.         this.show = true;
  45.         this.hasAnimation = true;
  46.       },
  47.       wxcMaskSetHidden () {
  48.         this.show = false;
  49.       },
  50.       openNoAnimationMask (e) {
  51.         this.show = true;
  52.         this.hasAnimation = false;
  53.       }
  54.     }
  55.   };
  56. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
show Bool Y false 是否显示
width Number Y 702 面板的宽度
height Number Y 800 面板的高度
top Number N 0 面板的 top 值，为 0 时垂直居中面板
has-animation Bool N true 面板弹出是否动画
show-close Bool N false 是否显示关闭按钮
has-overlay Bool N true 是否有蒙层
border-radius Number N 0 弹出的 border-radius
overlay-can-close Bool N true 点击 overlay 灰层是否可以关闭
mask-bg-color String N #ffffff mask 的背景颜色
duration String N 300 弹层出现时间
timing-function String N ease-in 弹层出现动画方式
overlay-cfg Object N {} 蒙层配置参数 wxc-overlay

事件回调

  1. //有一个关闭相关的回调逻辑,需要设置`show=false`
  2. @wxcMaskSetHidden="wxcMaskSetHidden" 
  4. @wxcMaskCloseClick="wxcMaskCloseClick"
  5. @wxcOverlayBodyClicked="wxcOverlayBodyClicked"

Please feel free to use and contribute to the development.

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