mirror of
https://github.com/ant-design/ant-design-mini.git
synced 2024-10-23 08:44:21 +08:00
fix: disabled button tap can callback (#1272)
* 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
This commit is contained in:
homi
GitHub
parent
b0a50b8950
commit
82c8014aea
@ -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
|
||||
>
|
||||
文本按钮
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
Page({
|
||||
handleTap(e) {
|
||||
handleTap() {
|
||||
my.alert({
|
||||
title: '点击按钮',
|
||||
});
|
||||
},
|
||||
handleDisabledTap() {
|
||||
my.alert({
|
||||
title: '禁用点击',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@ -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="输入框只读">
|
||||
|
||||
@ -39,4 +39,8 @@ Page({
|
||||
handleMinusValue() {
|
||||
this.setData({ value: this.data.value - 1 });
|
||||
},
|
||||
handleDisabledTap(e) {
|
||||
console.log('禁用点击：', e.target.dataset);
|
||||
my.showToast({ content: '禁用点击' });
|
||||
},
|
||||
});
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
### 更多属性
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -45,7 +45,6 @@ export interface IButtonProps extends IBaseProps {
|
||||
* @default false
|
||||
*/
|
||||
loading?: boolean;
|
||||
|
||||
/**
|
||||
* @description 是否为危险按钮，危险按钮的颜色会变成红色
|
||||
* @default false
|
||||
@ -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" 时有效。
|
||||
*/
|
||||
|
||||
@ -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
|
||||
@ -44,5 +45,6 @@
|
||||
data-mode="add"
|
||||
disabled="{{disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value >= max}}"
|
||||
onTap="onTap"
|
||||
onDisabledTap="onDisabledTap"
|
||||
></ant-button>
|
||||
</view>
|
||||
@ -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 |
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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> = {
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
Page({
|
||||
handleTap(e) {
|
||||
handleTap() {
|
||||
//@ts-ignore
|
||||
wx.showToast({
|
||||
title: '点击按钮',
|
||||
});
|
||||
},
|
||||
handleDisabledTap() {
|
||||
//@ts-ignore
|
||||
wx.showToast({
|
||||
title: '禁用点击',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@ -39,4 +39,8 @@ Page({
|
||||
handleMinusValue() {
|
||||
this.setData({ value: this.data.value - 1 });
|
||||
},
|
||||
handleDisabledTap(e) {
|
||||
console.log('禁用点击：', e.target.dataset);
|
||||
my.showToast({ content: '禁用点击' });
|
||||
},
|
||||
});
|
||||
|
||||
@ -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="输入框只读">
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
### 更多属性
|
||||
|
||||
|
||||
@ -24,6 +24,10 @@ Component(StepperDefaultProps, {
|
||||
var value = this.getValue();
|
||||
triggerEvent(this, 'blur', value === '' ? null : Number(value), e);
|
||||
},
|
||||
onDisabledTap: function (e) {
|
||||
var onDisabledTap = getValueFromProps(this, 'onDisabledTap');
|
||||
onDisabledTap && onDisabledTap(e);
|
||||
},
|
||||
onTap: function (e) {
|
||||
var _a = getValueFromProps(this, [
|
||||
'step',
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
data-mode="minus"
|
||||
disabled="{{disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value <= min}}"
|
||||
bind:tap="onTap"
|
||||
bind:disabledtap="onDisabledTap"
|
||||
></ant-button>
|
||||
<view class="ant-stepper-input-wrap">
|
||||
<view
|
||||
@ -42,5 +43,6 @@
|
||||
data-mode="add"
|
||||
disabled="{{disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value >= max}}"
|
||||
bind:tap="onTap"
|
||||
bind:disabledtap="onDisabledTap"
|
||||
></ant-button>
|
||||
</view>
|
||||
@ -45,12 +45,43 @@
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<!-- #if ALIPAY -->
|
||||
<ant-container
|
||||
title="禁用"
|
||||
className="list">
|
||||
<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>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #if WECHAT -->
|
||||
<ant-container
|
||||
title="禁用"
|
||||
className="list">
|
||||
<ant-button
|
||||
type="primary"
|
||||
disabled
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
|
||||
@ -66,6 +97,7 @@
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<!-- #endif -->
|
||||
|
||||
<ant-container
|
||||
title="加载状态"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
Page({
|
||||
handleTap(e) {
|
||||
handleTap() {
|
||||
/// #if ALIPAY
|
||||
my.alert({
|
||||
title: '点击按钮',
|
||||
@ -13,4 +13,18 @@ Page({
|
||||
});
|
||||
/// #endif
|
||||
},
|
||||
handleDisabledTap() {
|
||||
/// #if ALIPAY
|
||||
my.alert({
|
||||
title: '禁用点击',
|
||||
});
|
||||
/// #endif
|
||||
|
||||
/// #if WECHAT
|
||||
//@ts-ignore
|
||||
wx.showToast({
|
||||
title: '禁用点击',
|
||||
});
|
||||
/// #endif
|
||||
},
|
||||
});
|
||||
|
||||
@ -25,12 +25,14 @@
|
||||
defaultValue="{{ 0 }}"
|
||||
min="{{ 0 }}"
|
||||
max="{{ 10 }}"
|
||||
step="{{ 1 }}" />
|
||||
step="{{ 1 }}"
|
||||
onDisabledTap="handleDisabledTap" />
|
||||
</container>
|
||||
<container title="禁用状态">
|
||||
<stepper
|
||||
defaultValue="{{ 0 }}"
|
||||
disabled />
|
||||
disabled
|
||||
onDisabledTap="handleDisabledTap" />
|
||||
</container>
|
||||
<container title="输入框只读">
|
||||
<stepper
|
||||
|
||||
@ -48,4 +48,8 @@ Page({
|
||||
handleMinusValue() {
|
||||
this.setData({ value: this.data.value - 1 });
|
||||
},
|
||||
handleDisabledTap(e) {
|
||||
console.log('禁用点击：', e.target.dataset);
|
||||
my.showToast({ content: '禁用点击' });
|
||||
},
|
||||
});
|
||||
|
||||
@ -38,5 +38,5 @@
|
||||
"srcMiniprogramRoot": "wechat/",
|
||||
"projectname": "antd",
|
||||
"simulatorPluginLibVersion": {},
|
||||
"appid": "touristappid"
|
||||
}
|
||||
"appid": "wxa3f7e6ffee7a43e4"
|
||||
}
|
||||
@ -22,6 +22,9 @@ export const wechatCustomMapping = {
|
||||
'checkbox-group': {
|
||||
onChange: 'bindchange',
|
||||
},
|
||||
'ant-button': {
|
||||
onDisabledTap: 'bind:disabledtap',
|
||||
},
|
||||
'ant-textarea': {
|
||||
onChange: 'bind:change',
|
||||
},
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
### 更多属性
|
||||
|
||||
|
||||
@ -38,14 +38,22 @@ Component({
|
||||
methods: {
|
||||
/// #if ALIPAY
|
||||
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);
|
||||
|
||||
@ -45,7 +45,6 @@ export interface IButtonProps extends IBaseProps {
|
||||
* @default false
|
||||
*/
|
||||
loading?: boolean;
|
||||
|
||||
/**
|
||||
* @description 是否为危险按钮，危险按钮的颜色会变成红色
|
||||
* @default false
|
||||
@ -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" 时有效。
|
||||
*/
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
type="text"
|
||||
data-mode="minus"
|
||||
disabled="{{ disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value <= min }}"
|
||||
onTap="onTap" />
|
||||
onTap="onTap"
|
||||
onDisabledTap="onDisabledTap"
|
||||
/>
|
||||
<view class="ant-stepper-input-wrap">
|
||||
<view
|
||||
a:if="{{ inputReadOnly }}"
|
||||
@ -30,7 +32,8 @@
|
||||
onFocus="onFocus"
|
||||
onBlur="onBlur"
|
||||
onConfirm="onConfirm"
|
||||
value="{{ mixin.value }}" />
|
||||
value="{{ mixin.value }}"
|
||||
/>
|
||||
</view>
|
||||
<ant-button
|
||||
className="ant-stepper-button ant-stepper-button-up {{ disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value >= max ? 'ant-stepper-button-disabled' : '' }}"
|
||||
@ -39,5 +42,7 @@
|
||||
type="text"
|
||||
data-mode="add"
|
||||
disabled="{{ disabled || mixin.value !== '' && mixin.value !== undefined && mixin.value >= max }}"
|
||||
onTap="onTap" />
|
||||
onTap="onTap"
|
||||
onDisabledTap="onDisabledTap"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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> = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user