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.

Sign up for GitHub

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

fix: disabled button tap can callback #1272

Merged
merged 5 commits into from
Aug 30, 2024
Merged

fix: disabled button tap can callback #1272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
895c03c
fix: disabled button tap can callback
rayhomie Aug 28, 2024
cab35d5
fix: disabled button tap can callback
rayhomie Aug 28, 2024
d9e6199
fix: disabled button tap can callback
rayhomie Aug 28, 2024
54b29ea
fix: disabled button tap can callback
rayhomie Aug 29, 2024
d85a932
fix: disabled button tap can callback
rayhomie Aug 29, 2024
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
4 changes: 4 additions & 0 deletions compiled/alipay/demo/pages/Button/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,21 @@
<ant-button
type="primary"
disabled
onTap="handleTap"
onDisabledTap="handleDisabledTap"
>
主要按钮
</ant-button>
<ant-button
type="default"
onTap="handleTap"
disabled
>
次要按钮
</ant-button>
<ant-button
type="text"
onTap="handleTap"
disabled
>
文本按钮
Expand Down
7 changes: 6 additions & 1 deletion compiled/alipay/demo/pages/Button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
Page({
handleTap(e) {
handleTap() {
my.alert({
title: '点击按钮',
});
},
handleDisabledTap() {
my.alert({
title: '禁用点击',
});
},
});
2 changes: 2 additions & 0 deletions compiled/alipay/demo/pages/Stepper/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@
min="{{0}}"
max="{{10}}"
step="{{1}}"
onDisabledTap="handleDisabledTap"
></stepper>
</container>
<container title="禁用状态">
<stepper
defaultValue="{{0}}"
disabled
onDisabledTap="handleDisabledTap"
></stepper>
</container>
<container title="输入框只读">
Expand Down
4 changes: 4 additions & 0 deletions compiled/alipay/demo/pages/Stepper/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,8 @@ Page({
handleMinusValue() {
this.setData({ value: this.data.value - 1 });
},
handleDisabledTap(e) {
console.log('禁用点击：', e.target.dataset);
my.showToast({ content: '禁用点击' });
},
});
31 changes: 16 additions & 15 deletions compiled/alipay/src/Button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,22 @@ toc: 'content'

以下表格介绍了 Button 组件的 API 属性：

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 按钮类型，可选 `primary`、`default`、`text` | string | `default` |
| danger | 是否为危险按钮 | boolean | false |
| disabled | 是否为失效按钮 | boolean | false |
| activeClassName | 按下时的类名 | string | - |
| className | 类名 | string | - |
| style | 样式 | string | - |
| inline | 是否为内联按钮 | boolean | false |
| icon | 按钮左侧图标 | string | - |
| loading | 是否加载中，加载中时不可点击 | boolean | - |
| size | 按钮大小。仅在 `inline` 下生效，可选 `small`、`medium`、`large` | string | `medium` |
| subText | 辅助文字，显示在第二行。`inline` 下不生效 | string | - |
| catchTap | 点击按钮，触发此回调，非冒泡 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onTap | 点击按钮，触发此回调 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------- |
| type | 按钮类型，可选 `primary`、`default`、`text` | string | `default` |
| danger | 是否为危险按钮 | boolean | false |
| disabled | 是否为失效按钮 | boolean | false |
| activeClassName | 按下时的类名 | string | - |
| className | 类名 | string | - |
| style | 样式 | string | - |
| inline | 是否为内联按钮 | boolean | false |
| icon | 按钮左侧图标 | string | - |
| loading | 是否加载中，加载中时不可点击 | boolean | - |
| size | 按钮大小。仅在 `inline` 下生效，可选 `small`、`medium`、`large` | string | `medium` |
| subText | 辅助文字，显示在第二行。`inline` 下不生效 | string | - |
| catchTap | 点击按钮，触发此回调，非冒泡 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onTap | 点击按钮，触发此回调 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onDisabledTap | 禁用时点击出发回调（微信不支持） | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

### 更多属性

Expand Down
12 changes: 10 additions & 2 deletions compiled/alipay/src/Button/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,22 @@ Component({
props: ButtonDefaultProps,
methods: {
onTap(e) {
const { onTap, disabled, loading } = this.props;
const { onTap, disabled, loading, onDisabledTap } = this.props;
if (disabled && onDisabledTap) {
const event = fmtEvent(this.props, e);
onDisabledTap(event);
}
if (onTap && !disabled && !loading) {
const event = fmtEvent(this.props, e);
return onTap(event);
}
},
catchTap(e) {
const { catchTap, disabled, loading } = this.props;
const { catchTap, disabled, loading, onDisabledTap } = this.props;
if (disabled && onDisabledTap) {
const event = fmtEvent(this.props, e);
onDisabledTap(event);
}
if (catchTap && !disabled && !loading) {
const event = fmtEvent(this.props, e);
return catchTap(event);
Expand Down
6 changes: 4 additions & 2 deletions compiled/alipay/src/Button/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export interface IButtonProps extends IBaseProps {
* @default false
*/
loading?: boolean;

/**
* @description 是否为危险按钮，危险按钮的颜色会变成红色
* @default false
Expand All @@ -60,11 +59,14 @@ export interface IButtonProps extends IBaseProps {
* @description 点击回调
*/
onTap?: (event: any) => void;

/**
* @description 点击回调
*/
catchTap?: (event: any) => void;
/**
* @description 禁用时点击回调
*/
onDisabledTap?: (event: any) => void;
/**
* @description 生活号 id，必须是当前小程序同主体且已关联的生活号，open-type="lifestyle" 时有效。
*/
Expand Down
2 changes: 2 additions & 0 deletions compiled/alipay/src/Stepper/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
data-mode="minus"
disabled="{{disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value <= min}}"
onTap="onTap"
onDisabledTap="onDisabledTap"
></ant-button>
<view class="ant-stepper-input-wrap">
<view
Expand Down Expand Up @@ -44,5 +45,6 @@
data-mode="add"
disabled="{{disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value >= max}}"
onTap="onTap"
onDisabledTap="onDisabledTap"
></ant-button>
</view>
41 changes: 21 additions & 20 deletions compiled/alipay/src/Stepper/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,24 @@ toc: 'content'

## API

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| inputReadOnly | 输入框是否只读状态 | boolean | false |
| defaultValue | 初始值 | number | - |
| focus | 输入框选中状态 | boolean | false |
| inputClassName | 输入框类型 | string | - |
| inputStyle | 输入框样式 | string | - |
| max | 最大值 | number | - |
| min | 最小值 | number | - |
| precision | 计算精度，保留几位小数 [详见](https://github.com/ant-design/ant-design/issues/5998) | number | - |
| style | 样式 | string | - |
| step | 步距，即每次加减的值 | number | 1 |
| type | 输入框唤起键盘类型，可选 `number` `digit` | string | `digit` |
| value | 输入框的值, 表单提交的时候有效 | number | - |
| onBlur | 输入框失去焦点时，触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onChange | 数据变化后，触发此回调 | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onConfirm | 点击键盘完成时触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onFocus | 输入框聚焦时，触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| inputReadOnly | 输入框是否只读状态 | boolean | false |
| defaultValue | 初始值 | number | - |
| focus | 输入框选中状态 | boolean | false |
| inputClassName | 输入框类型 | string | - |
| inputStyle | 输入框样式 | string | - |
| max | 最大值 | number | - |
| min | 最小值 | number | - |
| precision | 计算精度，保留几位小数 [详见](https://github.com/ant-design/ant-design/issues/5998) | number | - |
| style | 样式 | string | - |
| step | 步距，即每次加减的值 | number | 1 |
| type | 输入框唤起键盘类型，可选 `number` `digit` | string | `digit` |
| value | 输入框的值, 表单提交的时候有效 | number | - |
| onBlur | 输入框失去焦点时，触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onChange | 数据变化后，触发此回调 | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onConfirm | 点击键盘完成时触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onFocus | 输入框聚焦时，触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onDisabledTap | 禁用时点击出发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
4 changes: 4 additions & 0 deletions compiled/alipay/src/Stepper/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ Component(
const value = this.getValue();
triggerEvent(this, 'blur', value === '' ? null : Number(value), e);
},
onDisabledTap(e) {
const onDisabledTap = getValueFromProps(this, 'onDisabledTap');
onDisabledTap && onDisabledTap(e);
},
onTap(e) {
const [
step,
Expand Down
4 changes: 4 additions & 0 deletions compiled/alipay/src/Stepper/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ export interface IStepperProps extends IBaseProps {
* @description onBlur
*/
onBlur?: (value: number, e: any) => void;
/**
* @description onDisabledTap
*/
onDisabledTap?: (e: any) => void;
}

export const StepperDefaultProps: Partial<IStepperProps> = {
Expand Down
8 changes: 7 additions & 1 deletion compiled/wechat/demo/pages/Button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
Page({
handleTap(e) {
handleTap() {
//@ts-ignore
wx.showToast({
title: '点击按钮',
});
},
handleDisabledTap() {
//@ts-ignore
wx.showToast({
title: '禁用点击',
});
},
});
4 changes: 4 additions & 0 deletions compiled/wechat/demo/pages/Stepper/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,8 @@ Page({
handleMinusValue() {
this.setData({ value: this.data.value - 1 });
},
handleDisabledTap(e) {
console.log('禁用点击：', e.target.dataset);
my.showToast({ content: '禁用点击' });
},
});
2 changes: 2 additions & 0 deletions compiled/wechat/demo/pages/Stepper/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@
min="{{0}}"
max="{{10}}"
step="{{1}}"
onDisabledTap="handleDisabledTap"
></stepper>
</container>
<container title="禁用状态">
<stepper
defaultValue="{{0}}"
disabled
onDisabledTap="handleDisabledTap"
></stepper>
</container>
<container title="输入框只读">
Expand Down
Loading
Loading