Weex 蒙层组件
<template> <div class="wrapper"> <div class="btn" @click="openOverlay"> <text class="btn-txt">点击打开蒙层</text> </div> <wxc-overlay :show="show" opacity="0.6" @wxcOverlayBodyClicked="wxcOverlayBodyClicked"></wxc-overlay> </div> </template> <script> import { WxcOverlay } from 'weex-ui'; export default { components: { WxcOverlay }, data: () => ({ show: false }), methods: { openOverlay () { this.show = true; }, wxcOverlayBodyClicked () { this.show = false; } } }; </script>
更详细代码可以参考 demo
| Prop | Type | Required | Default | Description | |-------------|------------|--------|-----| | show | Boolean
|Y
| false
| 是否开启 | | left | Number
|N
| 0
| 向左移动距离 | | top | Number
|N
| 0
| 向上移动距离 | | opacity | Number
|N
| 0.6
| 蒙层opacity度数0-1 | | has-animation | Boolean
|N
| true
| 是否开启蒙层出现动画 | | can-auto-close | Boolean
|N
| true
| 是否可以点击自动关闭 | | duration | Number
| 300
|N
| 蒙层动画时间 | | timing-function | Array
|N
| ['ease-in','ease-out']
| 蒙层显示和隐藏动画函数 |
//消失后 `@wxcOverlayBodyClicked="wxcOverlayBodyClicked"`; //点击立即 `@wxcOverlayBodyClicking="wxcOverlayBodyClicking"`;