1.5.1 • Published 1 year ago
@wines/backdrop v1.5.1
@wines/backdrop
Backdrop 背景幕
在组件中设置显示蒙层。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "Backdrop",
"usingComponents": {
"wux-button": "@wines/button",
"wux-backdrop": "@wines/backdrop"
}
}
示例
该组件主要依靠 JavaScript 主动调用,所以一般只需在 wxml 中添加一个组件,并设置 id 为
#wux-backdrop
或其他,之后在 page.js 中调用$wuxBackdrop(context, id)
获取匹配到的第一个组件实例对象。
<wux-backdrop id="wux-backdrop" />
<view class="page">
<view class="page__hd">
<view class="page__title">Backdrop</view>
<view class="page__desc">背景幕</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="btn-group">
<wux-button block type="light" bind:click="retain">保持背景幕 retain</wux-button>
<wux-button block type="light" bind:click="release">释放背景幕 release</wux-button>
</view>
<view class="text-center">背景幕锁:{{ locks }}</view>
</view>
</view>
import './index.less';
import { $wuxBackdrop, BackdropExports } from '@wines/backdrop';
let wuxBackdrop: BackdropExports;
Page({
data: {
locks: 0,
},
onLoad() {
wuxBackdrop = $wuxBackdrop();
},
retain() {
wuxBackdrop.retain();
this.setData({
locks: wuxBackdrop.backdropHolds,
});
},
release() {
wuxBackdrop.release();
this.setData({
locks: wuxBackdrop.backdropHolds,
});
},
});
API
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
prefixCls | string | 自定义类名前缀 | wux-backdrop |
classNames | string | 过渡的类名,更多内置过渡效果请参考 AnimationGroup | wux-animate--fadeIn |
transparent | boolean | 是否显示透明蒙层 | false |
zIndex | number | 设置蒙层的 z-index | 1000 |
bind:click | function | 蒙层点击事件 | - |
Methods/Properties
- Backdrop.retain()
- Backdrop.release()
- Backdrop.backdropHolds