Skip to content

Commit 14da68a

Browse files
yi-boideyi-boide
authored
feat(form): 新增禁用（disabled）属性 (#2690)
1 parent 791e8b0 commit 14da68a

File tree

24 files changed

+158
-90
lines changed

24 files changed

+158
-90
lines changed

‎src/packages/__VUE/checkbox/index.taro.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
2-
import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
2+
import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount, toRef } from 'vue';
33
import type { Component, PropType } from 'vue';
44
import { createComponent } from '@/packages/utils/create';
55
import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue-taro';
66
import { pxCheck } from '@/packages/utils/pxCheck';
77
import { CHECKBOX_KEY, CheckboxTextPosition, CheckboxShape } from './types';
8+
import { useFormDisabled } from '../form/common';
89
const { create, componentName } = createComponent('checkbox');
910
1011
export default create({
@@ -40,6 +41,7 @@ export default create({
4041
},
4142
emits: ['change', 'update:modelValue'],
4243
setup(props, { emit, slots }) {
44+
const disabled = useFormDisabled(toRef(props, 'disabled'));
4345
const parent: any = inject(CHECKBOX_KEY, null);
4446
const state = reactive({
4547
partialSelect: props.indeterminate
@@ -56,7 +58,7 @@ export default create({
5658
});
5759
5860
const pDisabled = computed(() => {
59-
return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
61+
return hasParent.value ? (parent.disabled.value ? parent.disabled.value : disabled.value) : disabled.value;
6062
});
6163
6264
const checked = computed(() => !!props.modelValue);

‎src/packages/__VUE/checkbox/index.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
2-
import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
2+
import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount, toRef } from 'vue';
33
import type { Component, PropType } from 'vue';
44
import { createComponent } from '@/packages/utils/create';
55
import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue';
66
import { pxCheck } from '@/packages/utils/pxCheck';
77
import { CHECKBOX_KEY, CheckboxTextPosition, CheckboxShape } from './types';
8+
import { useFormDisabled } from '../form/common';
89
const { create, componentName } = createComponent('checkbox');
910
1011
export default create({
@@ -40,6 +41,7 @@ export default create({
4041
},
4142
emits: ['change', 'update:modelValue'],
4243
setup(props, { emit, slots }) {
44+
const disabled = useFormDisabled(toRef(props, 'disabled'));
4345
const parent: any = inject(CHECKBOX_KEY, null);
4446
const state = reactive({
4547
partialSelect: props.indeterminate
@@ -56,7 +58,7 @@ export default create({
5658
});
5759
5860
const pDisabled = computed(() => {
59-
return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
61+
return hasParent.value ? (parent.disabled.value ? parent.disabled.value : disabled.value) : disabled.value;
6062
});
6163
6264
const checked = computed(() => !!props.modelValue);

‎src/packages/__VUE/form/common.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import { getPropByPath, isPromise } from '@/packages/utils/util';
2-
import { computed, PropType, provide, reactive, watch } from 'vue';
2+
import { computed, provide, reactive, watch } from 'vue';
3+
import { useChildren, useParent } from '@/packages/utils';
34
import { FORM_KEY } from './types';
4-
import { useChildren } from '@/packages/utils';
5+
import type { ComputedRef, PropType, Ref } from 'vue';
56
import type { FormItemRule } from '../formitem/types';
67
import type { ErrorMessage, FormRule, FormRules, FormLabelPosition, FormStarPosition } from './types';
78

9+
export const useFormDisabled = (disabled: Ref<boolean>): ComputedRef<boolean> => {
10+
const { parent } = useParent(FORM_KEY);
11+
return computed(() => disabled.value || parent?.props?.disabled || false);
12+
};
13+
814
export const component = (components: any) => {
915
return {
1016
props: {
@@ -16,6 +22,10 @@ export const component = (components: any) => {
1622
type: Object as PropType<FormRules>,
1723
default: () => ({})
1824
},
25+
disabled: {
26+
type: Boolean,
27+
default: false
28+
},
1929
labelPosition: {
2030
type: String as PropType<FormLabelPosition>,
2131
default: 'left'
@@ -71,7 +81,7 @@ export const component = (components: any) => {
7181
};
7282

7383
const checkRule = async (item: FormRule): Promise<ErrorMessage | boolean> => {
74-
const { rules, prop } = item;
84+
const { rules = [], prop } = item;
7585

7686
const _Promise = (errorMsg: ErrorMessage): Promise<ErrorMessage> => {
7787
return new Promise((resolve, reject) => {

‎src/packages/__VUE/form/doc.en-US.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ app.use(FormItem);
4747
| --- | --- | --- | --- |
4848
| model-value | Form data object (required when using form verification) | object | |
4949
| rules | Unified configuration FormItem attr rules | { prop: FormItemRule[] } | `{}` |
50+
| disabled | Disable all data entry components under the form | boolean | `false` |
5051
| label-position`v4.2.4` | The location of the form item label | `top` \| `left` \| `right` | `left` |
5152
| star-position`v4.2.4` | The red star position of the single label is required | `left` \| `right` | `left` |
5253

‎src/packages/__VUE/form/doc.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ app.use(FormItem);
4747
| --- | --- | --- | --- |
4848
| model-value | 表单数据对象(使用表单校验时，_必填_) | object | |
4949
| rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
50+
| disabled | 禁用表单下的所有数据录入组件 | boolean | `false` |
5051
| label-position`v4.2.4` | 表单项 label 的位置 | `top` \| `left` \| `right` | `left` |
5152
| star-position`v4.2.4` | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
5253

‎src/packages/__VUE/form/doc.taro.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ app.use(FormItem);
4747
| --- | --- | --- | --- |
4848
| model-value | 表单数据对象(使用表单校验时，_必填_) | object | |
4949
| rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
50+
| disabled | 禁用表单下的所有数据录入组件 | boolean | `false` |
5051
| label-position`v4.2.4` | 表单项 label 的位置 | `top` \| `left` \| `right` | `left` |
5152
| star-position`v4.2.4` | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
5253

‎src/packages/__VUE/input/index.taro.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,14 @@
5656
</view>
5757
</template>
5858
<script lang="ts">
59-
import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h } from 'vue';
59+
import Taro from '@tarojs/taro';
60+
import { MaskClose } from '@nutui/icons-vue-taro';
61+
import { ref, reactive, computed, onMounted, watch, h, toRef } from 'vue';
6062
import { createComponent } from '@/packages/utils/create';
6163
import { formatNumber } from './util';
62-
import { MaskClose } from '@nutui/icons-vue-taro';
63-
import Taro from '@tarojs/taro';
64+
import { useFormDisabled } from '../form/common';
6465
66+
import type { PropType, ComputedRef } from 'vue';
6567
import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType, InputEvent } from './type';
6668
6769
const { componentName, create } = createComponent('input');
@@ -158,6 +160,7 @@ export default create({
158160
emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
159161
160162
setup(props, { emit }) {
163+
const disabled = useFormDisabled(toRef(props, 'disabled'));
161164
const active = ref(false);
162165
163166
const inputRef = ref();
@@ -193,7 +196,7 @@ export default create({
193196
const prefixCls = componentName;
194197
return {
195198
[prefixCls]: true,
196-
[`${prefixCls}--disabled`]: props.disabled,
199+
[`${prefixCls}--disabled`]: disabled.value,
197200
[`${prefixCls}--required`]: props.required,
198201
[`${prefixCls}--error`]: props.error,
199202
[`${prefixCls}--border`]: props.border,
@@ -243,7 +246,7 @@ export default create({
243246
};
244247
245248
const onFocus = (event: Event) => {
246-
if (props.disabled || props.readonly) {
249+
if (disabled.value || props.readonly) {
247250
return;
248251
}
249252
active.value = true;
@@ -252,7 +255,7 @@ export default create({
252255
};
253256
254257
const onBlur = (event: Event) => {
255-
if (props.disabled || props.readonly) {
258+
if (disabled.value || props.readonly) {
256259
return;
257260
}
258261
setTimeout(() => {
@@ -271,7 +274,7 @@ export default create({
271274
272275
const clear = (event: Event) => {
273276
event.stopPropagation();
274-
if (props.disabled) return;
277+
if (disabled.value) return;
275278
emit('update:modelValue', '', event);
276279
// emit('change', '', event);
277280
emit('clear', '', event);
@@ -285,7 +288,7 @@ export default create({
285288
};
286289
287290
const onClickInput = (event: MouseEvent) => {
288-
if (props.disabled) {
291+
if (disabled.value) {
289292
return;
290293
}
291294
emit('clickInput', event);
@@ -341,6 +344,7 @@ export default create({
341344
active,
342345
classes,
343346
styles,
347+
disabled,
344348
onInput,
345349
onFocus,
346350
onBlur,

‎src/packages/__VUE/input/index.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,11 @@
5252
</view>
5353
</template>
5454
<script lang="ts">
55-
import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h } from 'vue';
55+
import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h, toRef } from 'vue';
56+
import { MaskClose } from '@nutui/icons-vue';
5657
import { createComponent } from '@/packages/utils/create';
5758
import { formatNumber, mapInputType } from './util';
58-
import { MaskClose } from '@nutui/icons-vue';
59+
import { useFormDisabled } from '../form/common';
5960
6061
import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType } from './type';
6162
@@ -146,6 +147,7 @@ export default create({
146147
expose: ['focus', 'blur', 'select'],
147148
148149
setup(props, { emit }) {
150+
const disabled = useFormDisabled(toRef(props, 'disabled'));
149151
const active = ref(false);
150152
const inputRef = ref();
151153
const getModelValue = () => String(props.modelValue ?? '');
@@ -162,7 +164,7 @@ export default create({
162164
const prefixCls = componentName;
163165
return {
164166
[prefixCls]: true,
165-
[`${prefixCls}--disabled`]: props.disabled,
167+
[`${prefixCls}--disabled`]: disabled.value,
166168
[`${prefixCls}--required`]: props.required,
167169
[`${prefixCls}--error`]: props.error,
168170
[`${prefixCls}--border`]: props.border,
@@ -208,7 +210,7 @@ export default create({
208210
};
209211
210212
const onFocus = (event: Event) => {
211-
if (props.disabled || props.readonly) {
213+
if (disabled.value || props.readonly) {
212214
return;
213215
}
214216
active.value = true;
@@ -217,7 +219,7 @@ export default create({
217219
};
218220
219221
const onBlur = (event: Event) => {
220-
if (props.disabled || props.readonly) {
222+
if (disabled.value || props.readonly) {
221223
return;
222224
}
223225
setTimeout(() => {
@@ -236,7 +238,7 @@ export default create({
236238
237239
const clear = (event: Event) => {
238240
event.stopPropagation();
239-
if (props.disabled) return;
241+
if (disabled.value) return;
240242
emit('update:modelValue', '', event);
241243
// emit('change', '', event);
242244
emit('clear', '', event);
@@ -250,7 +252,7 @@ export default create({
250252
};
251253
252254
const onClickInput = (event: MouseEvent) => {
253-
if (props.disabled) {
255+
if (disabled.value) {
254256
return;
255257
}
256258
emit('clickInput', event);
@@ -306,6 +308,7 @@ export default create({
306308
active,
307309
classes,
308310
styles,
311+
disabled,
309312
onInput,
310313
onFocus,
311314
onBlur,

‎src/packages/__VUE/inputnumber/index.taro.vue‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,11 @@
3838
</view>
3939
</template>
4040
<script lang="ts">
41-
import { computed, watch } from 'vue';
41+
import { computed, toRef, watch } from 'vue';
4242
import { createComponent } from '@/packages/utils/create';
4343
import { pxCheck } from '@/packages/utils/pxCheck';
4444
import { Minus, Plus } from '@nutui/icons-vue-taro';
45+
import { useFormDisabled } from '../form/common';
4546
const { componentName, create } = createComponent('input-number');
4647
export default create({
4748
components: { Minus, Plus },
@@ -85,11 +86,12 @@ export default create({
8586
},
8687
emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],
8788
setup(props, { emit }) {
89+
const disabled = useFormDisabled(toRef(props, 'disabled'));
8890
const classes = computed(() => {
8991
const prefixCls = componentName;
9092
return {
9193
[prefixCls]: true,
92-
[`${prefixCls}--disabled`]: props.disabled
94+
[`${prefixCls}--disabled`]: disabled.value
9395
};
9496
});
9597
const fixedDecimalPlaces = (v: string | number): string => {
@@ -106,13 +108,13 @@ export default create({
106108
if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
107109
};
108110
const addAllow = (value = Number(props.modelValue)): boolean => {
109-
return value < Number(props.max) && !props.disabled;
111+
return value < Number(props.max) && !disabled.value;
110112
};
111113
const reduceAllow = (value = Number(props.modelValue)): boolean => {
112-
return value > Number(props.min) && !props.disabled;
114+
return value > Number(props.min) && !disabled.value;
113115
};
114116
const reduce = (event: Event) => {
115-
if (props.disabled) return;
117+
if (disabled.value) return;
116118
emit('reduce', event);
117119
let output_value = Number(props.modelValue) - Number(props.step);
118120
if (reduceAllow() && output_value >= Number(props.min)) {
@@ -123,7 +125,7 @@ export default create({
123125
}
124126
};
125127
const add = (event: Event) => {
126-
if (props.disabled) return;
128+
if (disabled.value) return;
127129
emit('add', event);
128130
let output_value = Number(props.modelValue) + Number(props.step);
129131
if (addAllow() && output_value <= Number(props.max)) {
@@ -134,15 +136,15 @@ export default create({
134136
}
135137
};
136138
const focus = (event: Event) => {
137-
if (props.disabled) return;
139+
if (disabled.value) return;
138140
if (props.readonly) {
139141
blur(event);
140142
return;
141143
}
142144
emit('focus', event);
143145
};
144146
const blur = (event: Event) => {
145-
if (props.disabled) return;
147+
if (disabled.value) return;
146148
if (props.readonly) return;
147149
const input = event.target as HTMLInputElement;
148150
let value = Number(input.value);
@@ -178,6 +180,7 @@ export default create({
178180
179181
return {
180182
classes,
183+
disabled,
181184
change,
182185
blur,
183186
focus,

0 commit comments

Comments
 (0)