Skip to content

Commit

Permalink
fix: disabled button tap can callback (#1272)
Browse files Browse the repository at this point in the history 
* fix: disabled button tap  can  callback

* fix: disabled button tap  can  callback

* fix: disabled button tap  can  callback

* fix: disabled button tap  can  callback

* fix: disabled button tap  can  callback
  • Loading branch information
@rayhomie
rayhomie authored Aug 30, 2024
1 parent b0a50b8 commit 82c8014
Show file tree
Hide file tree
Showing 31 changed files with 260 additions and 123 deletions.
4 changes: 4 additions & 0 deletions compiled/alipay/demo/pages/Button/index.axml
View file
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
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
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 82c8014

Please sign in to comment.