Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/mask disable scroll #207

Merged
merged 5 commits into from
Aug 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/Mask/index.axml
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<import-sjs from="../_util/event.sjs" name="_sjs" />

<view
class="amd-mask {{className||''}} {{type === 'market'?'amd-mask__m':''}} {{fixMaskFull ? 'amd-mask__fix' : ''}}"
style="{{show?'':'display: none;'}}{{maskZindex?'z-index: ' + maskZindex + ';':''}}"
onTap="onMaskClick"
></view>
onTouchMove="{{disableScroll && supportSjs ? _sjs.disableScrollEvent : ''}}"
></view>
58 changes: 30 additions & 28 deletions src/Mask/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,47 @@ toc: 'content'
---

# Mask 背景蒙层

深色背景层
## 何时使用
常用于模态窗口的背景层,使视觉焦点突出在模态窗口本身
## 代码示例
### 基本使用
<code src='../../demo/pages/Mask'></code>

## 何时使用

## 属性
常用于模态窗口的背景层,使视觉焦点突出在模态窗口本身

## 代码示例

| 属性 | 类型 | 必填 | 默认值 | 说明 |
| -----|-----|-----|-----|----- |
| maskZindex | string | 否 | - | 层级 |
| type | 'product' &verbar; 'market' | 否 | 'product' | 类别 |
| show | boolean | 否 | - | 是否显示 |
| fixMaskFull | false | 否 | - | 兼容mask祖父transform定位偏移 |
| className | string | 否 | - | 类名 |
### 基本使用

## 事件
<code src='../../demo/pages/Mask'></code>

## 属性

| 事件名 | 说明 | 类型 |
| -----|-----|----- |
| onMaskTap | | (v: Record<string, any>) => void |
| 属性 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | --------------------------- | ---- | --------- | --------------------------------- |
| maskZindex | string | 否 | - | 层级 |
| type | 'product' &verbar; 'market' | 否 | 'product' | 类别 |
| show | boolean | 否 | - | 是否显示 |
| fixMaskFull | false | 否 | - | 兼容 mask 祖父 transform 定位偏移 |
| disableScroll | boolean | 否 | false | mask 展示时,是否禁止页面滚动 |
| className | string | 否 | - | 类名 |

## CSS 变量
## 事件

| CSS 变量名称 | 说明 |
| -----|----- |
| --am-mask-backgroundColor | - |
| --am-mask-market-backgroundColor | - |
| 事件名 | 说明 | 类型 |
| --------- | ---- | -------------------------------- |
| onMaskTap | | (v: Record<string, any>) => void |

## 样式类
## CSS 变量

| 类名 | 说明 |
| -----|----- |
| amd-mask | - |
| amd-mask__m | - |
| amd-mask__fix | - |
| CSS 变量名称 | 说明 |
| -------------------------------- | ---- |
| --am-mask-backgroundColor | - |
| --am-mask-market-backgroundColor | - |

## 样式类

| 类名 | 说明 |
| --------------- | ---- |
| amd-mask | - |
| amd-mask\_\_m | - |
| amd-mask\_\_fix | - |
5 changes: 4 additions & 1 deletion src/Mask/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import fmtEvent from '../_util/fmtEvent';
import {MaskDefaultProps} from "./props"
import { MaskDefaultProps } from './props';
Component({
data: {
supportSjs: my.canIUse('sjs.event'),
},
props: MaskDefaultProps,
methods: {
onMaskClick(e) {
Expand Down
11 changes: 6 additions & 5 deletions src/Mask/props.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { IBaseProps } from '../_base';
* @description 加载,用于提示局部或页面在加载中。
*/
export interface IMaskProps extends IBaseProps {
maskZindex: string,
type: 'product' | 'market',
show: boolean,
fixMaskFull: false,
onMaskTap: (v: Record<string, any>) => void
maskZindex: string;
type: 'product' | 'market';
show: boolean;
fixMaskFull: boolean;
disableScroll: boolean;
onMaskTap: (v: Record<string, any>) => void;
}
export declare const MaskDefaultProps: Partial<IMaskProps>;
12 changes: 6 additions & 6 deletions src/Mask/props.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const MaskDefaultProps = {
maskZindex: '',
type: 'product',
show: true,
fixMaskFull: false,
};
maskZindex: '',
type: 'product',
show: true,
fixMaskFull: false,
disableScroll: false,
};
2 changes: 1 addition & 1 deletion src/Popup/index.axml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<import-sjs from="./index.sjs" name="_sjs" />
<import-sjs from="../_util/event.sjs" name="_sjs" />

<view
class="amd-popup {{classNames}}"
Expand Down
File renamed without changes.