From 14da68a0e98082bfe5067cadc37faa5e8c7d615f Mon Sep 17 00:00:00 2001
From: Marvin <63292605+yi-boide@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:19:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20=E6=96=B0=E5=A2=9E=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=EF=BC=88disabled=EF=BC=89=E5=B1=9E=E6=80=A7=20(#2690)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/checkbox/index.taro.vue    |  6 ++++--
 src/packages/__VUE/checkbox/index.vue         |  6 ++++--
 src/packages/__VUE/form/common.ts             | 16 ++++++++++++---
 src/packages/__VUE/form/doc.en-US.md          |  1 +
 src/packages/__VUE/form/doc.md                |  1 +
 src/packages/__VUE/form/doc.taro.md           |  1 +
 src/packages/__VUE/input/index.taro.vue       | 20 +++++++++++--------
 src/packages/__VUE/input/index.vue            | 17 +++++++++-------
 src/packages/__VUE/inputnumber/index.taro.vue | 19 ++++++++++--------
 src/packages/__VUE/inputnumber/index.vue      | 19 ++++++++++--------
 src/packages/__VUE/radio/index.taro.vue       | 11 +++++-----
 src/packages/__VUE/radio/index.vue            | 10 ++++++----
 src/packages/__VUE/range/index.taro.vue       | 17 +++++++++-------
 src/packages/__VUE/range/index.vue            | 17 +++++++++-------
 src/packages/__VUE/rate/index.taro.vue        |  9 ++++++---
 src/packages/__VUE/rate/index.vue             |  9 ++++++---
 src/packages/__VUE/searchbar/index.taro.vue   |  7 +++++--
 src/packages/__VUE/searchbar/index.vue        |  7 +++++--
 src/packages/__VUE/switch/index.taro.vue      |  8 +++++---
 src/packages/__VUE/switch/index.vue           |  8 +++++---
 src/packages/__VUE/textarea/index.taro.vue    | 11 ++++++----
 src/packages/__VUE/textarea/index.vue         | 11 ++++++----
 src/packages/__VUE/uploader/index.taro.vue    |  8 ++++++--
 src/packages/__VUE/uploader/index.vue         |  9 ++++++---
 24 files changed, 158 insertions(+), 90 deletions(-)

diff --git a/src/packages/__VUE/checkbox/index.taro.vue b/src/packages/__VUE/checkbox/index.taro.vue
index 9b0440d963..f743190d40 100644
--- a/src/packages/__VUE/checkbox/index.taro.vue
+++ b/src/packages/__VUE/checkbox/index.taro.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount, toRef } from 'vue';
 import type { Component, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue-taro';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { CHECKBOX_KEY, CheckboxTextPosition, CheckboxShape } from './types';
+import { useFormDisabled } from '../form/common';
 const { create, componentName } = createComponent('checkbox');
 
 export default create({
@@ -40,6 +41,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const parent: any = inject(CHECKBOX_KEY, null);
     const state = reactive({
       partialSelect: props.indeterminate
@@ -56,7 +58,7 @@ export default create({
     });
 
     const pDisabled = computed(() => {
-      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
+      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : disabled.value) : disabled.value;
     });
 
     const checked = computed(() => !!props.modelValue);
diff --git a/src/packages/__VUE/checkbox/index.vue b/src/packages/__VUE/checkbox/index.vue
index 139f4984b5..98ef148055 100644
--- a/src/packages/__VUE/checkbox/index.vue
+++ b/src/packages/__VUE/checkbox/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount, toRef } from 'vue';
 import type { Component, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { CHECKBOX_KEY, CheckboxTextPosition, CheckboxShape } from './types';
+import { useFormDisabled } from '../form/common';
 const { create, componentName } = createComponent('checkbox');
 
 export default create({
@@ -40,6 +41,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const parent: any = inject(CHECKBOX_KEY, null);
     const state = reactive({
       partialSelect: props.indeterminate
@@ -56,7 +58,7 @@ export default create({
     });
 
     const pDisabled = computed(() => {
-      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
+      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : disabled.value) : disabled.value;
     });
 
     const checked = computed(() => !!props.modelValue);
diff --git a/src/packages/__VUE/form/common.ts b/src/packages/__VUE/form/common.ts
index be9a49325e..cdef6aed65 100644
--- a/src/packages/__VUE/form/common.ts
+++ b/src/packages/__VUE/form/common.ts
@@ -1,10 +1,16 @@
 import { getPropByPath, isPromise } from '@/packages/utils/util';
-import { computed, PropType, provide, reactive, watch } from 'vue';
+import { computed, provide, reactive, watch } from 'vue';
+import { useChildren, useParent } from '@/packages/utils';
 import { FORM_KEY } from './types';
-import { useChildren } from '@/packages/utils';
+import type { ComputedRef, PropType, Ref } from 'vue';
 import type { FormItemRule } from '../formitem/types';
 import type { ErrorMessage, FormRule, FormRules, FormLabelPosition, FormStarPosition } from './types';
 
+export const useFormDisabled = (disabled: Ref<boolean>): ComputedRef<boolean> => {
+  const { parent } = useParent(FORM_KEY);
+  return computed(() => disabled.value || parent?.props?.disabled || false);
+};
+
 export const component = (components: any) => {
   return {
     props: {
@@ -16,6 +22,10 @@ export const component = (components: any) => {
         type: Object as PropType<FormRules>,
         default: () => ({})
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       labelPosition: {
         type: String as PropType<FormLabelPosition>,
         default: 'left'
@@ -71,7 +81,7 @@ export const component = (components: any) => {
       };
 
       const checkRule = async (item: FormRule): Promise<ErrorMessage | boolean> => {
-        const { rules, prop } = item;
+        const { rules = [], prop } = item;
 
         const _Promise = (errorMsg: ErrorMessage): Promise<ErrorMessage> => {
           return new Promise((resolve, reject) => {
diff --git a/src/packages/__VUE/form/doc.en-US.md b/src/packages/__VUE/form/doc.en-US.md
index e0f23b222e..c53a0b7a94 100644
--- a/src/packages/__VUE/form/doc.en-US.md
+++ b/src/packages/__VUE/form/doc.en-US.md
@@ -47,6 +47,7 @@ app.use(FormItem);
 | --- | --- | --- | --- |
 | model-value | Form data object (required when using form verification) | object |  |
 | rules | Unified configuration FormItem attr rules | { prop: FormItemRule[] } | `{}` |
+| disabled | Disable all data entry components under the form | boolean | `false` |
 | label-position`v4.2.4` | The location of the form item label | `top` \| `left` \| `right` | `left` |
 | star-position`v4.2.4` | The red star position of the single label is required | `left` \| `right` | `left` |
 
diff --git a/src/packages/__VUE/form/doc.md b/src/packages/__VUE/form/doc.md
index e1e8a92b41..ef7c52018b 100644
--- a/src/packages/__VUE/form/doc.md
+++ b/src/packages/__VUE/form/doc.md
@@ -47,6 +47,7 @@ app.use(FormItem);
 | --- | --- | --- | --- |
 | model-value | 表单数据对象(使用表单校验时，_必填_) | object |  |
 | rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
+| disabled | 禁用表单下的所有数据录入组件 | boolean | `false` |
 | label-position`v4.2.4` | 表单项 label 的位置 | `top` \| `left` \| `right` | `left` |
 | star-position`v4.2.4` | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
 
diff --git a/src/packages/__VUE/form/doc.taro.md b/src/packages/__VUE/form/doc.taro.md
index 1ce9b260df..da6ed326bb 100644
--- a/src/packages/__VUE/form/doc.taro.md
+++ b/src/packages/__VUE/form/doc.taro.md
@@ -47,6 +47,7 @@ app.use(FormItem);
 | --- | --- | --- | --- |
 | model-value | 表单数据对象(使用表单校验时，_必填_) | object |  |
 | rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
+| disabled | 禁用表单下的所有数据录入组件 | boolean | `false` |
 | label-position`v4.2.4` | 表单项 label 的位置 | `top` \| `left` \| `right` | `left` |
 | star-position`v4.2.4` | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
 
diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
index a40c96b460..303e5abcbd 100644
--- a/src/packages/__VUE/input/index.taro.vue
+++ b/src/packages/__VUE/input/index.taro.vue
@@ -56,12 +56,14 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h } from 'vue';
+import Taro from '@tarojs/taro';
+import { MaskClose } from '@nutui/icons-vue-taro';
+import { ref, reactive, computed, onMounted, watch, h, toRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
-import { MaskClose } from '@nutui/icons-vue-taro';
-import Taro from '@tarojs/taro';
+import { useFormDisabled } from '../form/common';
 
+import type { PropType, ComputedRef } from 'vue';
 import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType, InputEvent } from './type';
 
 const { componentName, create } = createComponent('input');
@@ -158,6 +160,7 @@ export default create({
   emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const active = ref(false);
 
     const inputRef = ref();
@@ -193,7 +196,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled,
+        [`${prefixCls}--disabled`]: disabled.value,
         [`${prefixCls}--required`]: props.required,
         [`${prefixCls}--error`]: props.error,
         [`${prefixCls}--border`]: props.border,
@@ -243,7 +246,7 @@ export default create({
     };
 
     const onFocus = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       active.value = true;
@@ -252,7 +255,7 @@ export default create({
     };
 
     const onBlur = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       setTimeout(() => {
@@ -271,7 +274,7 @@ export default create({
 
     const clear = (event: Event) => {
       event.stopPropagation();
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('update:modelValue', '', event);
       // emit('change', '', event);
       emit('clear', '', event);
@@ -285,7 +288,7 @@ export default create({
     };
 
     const onClickInput = (event: MouseEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       emit('clickInput', event);
@@ -341,6 +344,7 @@ export default create({
       active,
       classes,
       styles,
+      disabled,
       onInput,
       onFocus,
       onBlur,
diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
index 7293b63e4d..9669657a52 100644
--- a/src/packages/__VUE/input/index.vue
+++ b/src/packages/__VUE/input/index.vue
@@ -52,10 +52,11 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h } from 'vue';
+import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h, toRef } from 'vue';
+import { MaskClose } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber, mapInputType } from './util';
-import { MaskClose } from '@nutui/icons-vue';
+import { useFormDisabled } from '../form/common';
 
 import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType } from './type';
 
@@ -146,6 +147,7 @@ export default create({
   expose: ['focus', 'blur', 'select'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const active = ref(false);
     const inputRef = ref();
     const getModelValue = () => String(props.modelValue ?? '');
@@ -162,7 +164,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled,
+        [`${prefixCls}--disabled`]: disabled.value,
         [`${prefixCls}--required`]: props.required,
         [`${prefixCls}--error`]: props.error,
         [`${prefixCls}--border`]: props.border,
@@ -208,7 +210,7 @@ export default create({
     };
 
     const onFocus = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       active.value = true;
@@ -217,7 +219,7 @@ export default create({
     };
 
     const onBlur = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       setTimeout(() => {
@@ -236,7 +238,7 @@ export default create({
 
     const clear = (event: Event) => {
       event.stopPropagation();
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('update:modelValue', '', event);
       // emit('change', '', event);
       emit('clear', '', event);
@@ -250,7 +252,7 @@ export default create({
     };
 
     const onClickInput = (event: MouseEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       emit('clickInput', event);
@@ -306,6 +308,7 @@ export default create({
       active,
       classes,
       styles,
+      disabled,
       onInput,
       onFocus,
       onBlur,
diff --git a/src/packages/__VUE/inputnumber/index.taro.vue b/src/packages/__VUE/inputnumber/index.taro.vue
index d7bfa1378a..f78dc7ba93 100644
--- a/src/packages/__VUE/inputnumber/index.taro.vue
+++ b/src/packages/__VUE/inputnumber/index.taro.vue
@@ -38,10 +38,11 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, watch } from 'vue';
+import { computed, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { Minus, Plus } from '@nutui/icons-vue-taro';
+import { useFormDisabled } from '../form/common';
 const { componentName, create } = createComponent('input-number');
 export default create({
   components: { Minus, Plus },
@@ -85,11 +86,12 @@ export default create({
   },
   emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled
+        [`${prefixCls}--disabled`]: disabled.value
       };
     });
     const fixedDecimalPlaces = (v: string | number): string => {
@@ -106,13 +108,13 @@ export default create({
       if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
     };
     const addAllow = (value = Number(props.modelValue)): boolean => {
-      return value < Number(props.max) && !props.disabled;
+      return value < Number(props.max) && !disabled.value;
     };
     const reduceAllow = (value = Number(props.modelValue)): boolean => {
-      return value > Number(props.min) && !props.disabled;
+      return value > Number(props.min) && !disabled.value;
     };
     const reduce = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('reduce', event);
       let output_value = Number(props.modelValue) - Number(props.step);
       if (reduceAllow() && output_value >= Number(props.min)) {
@@ -123,7 +125,7 @@ export default create({
       }
     };
     const add = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('add', event);
       let output_value = Number(props.modelValue) + Number(props.step);
       if (addAllow() && output_value <= Number(props.max)) {
@@ -134,7 +136,7 @@ export default create({
       }
     };
     const focus = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) {
         blur(event);
         return;
@@ -142,7 +144,7 @@ export default create({
       emit('focus', event);
     };
     const blur = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       const input = event.target as HTMLInputElement;
       let value = Number(input.value);
@@ -178,6 +180,7 @@ export default create({
 
     return {
       classes,
+      disabled,
       change,
       blur,
       focus,
diff --git a/src/packages/__VUE/inputnumber/index.vue b/src/packages/__VUE/inputnumber/index.vue
index d2e91638cd..3606b7908a 100644
--- a/src/packages/__VUE/inputnumber/index.vue
+++ b/src/packages/__VUE/inputnumber/index.vue
@@ -33,10 +33,11 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, watch } from 'vue';
+import { computed, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { Minus, Plus } from '@nutui/icons-vue';
+import { useFormDisabled } from '../form/common';
 const { componentName, create } = createComponent('input-number');
 export default create({
   components: { Minus, Plus },
@@ -80,11 +81,12 @@ export default create({
   },
   emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled
+        [`${prefixCls}--disabled`]: disabled.value
       };
     });
     const fixedDecimalPlaces = (v: string | number): string => {
@@ -101,13 +103,13 @@ export default create({
       if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
     };
     const addAllow = (value = Number(props.modelValue)): boolean => {
-      return value < Number(props.max) && !props.disabled;
+      return value < Number(props.max) && !disabled.value;
     };
     const reduceAllow = (value = Number(props.modelValue)): boolean => {
-      return value > Number(props.min) && !props.disabled;
+      return value > Number(props.min) && !disabled.value;
     };
     const reduce = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('reduce', event);
       let output_value = Number(props.modelValue) - Number(props.step);
       if (reduceAllow() && output_value >= Number(props.min)) {
@@ -118,7 +120,7 @@ export default create({
       }
     };
     const add = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('add', event);
       let output_value = Number(props.modelValue) + Number(props.step);
       if (addAllow() && output_value <= Number(props.max)) {
@@ -129,12 +131,12 @@ export default create({
       }
     };
     const focus = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       emit('focus', event);
     };
     const blur = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       const input = event.target as HTMLInputElement;
       let value = input.valueAsNumber;
@@ -170,6 +172,7 @@ export default create({
 
     return {
       classes,
+      disabled,
       change,
       blur,
       focus,
diff --git a/src/packages/__VUE/radio/index.taro.vue b/src/packages/__VUE/radio/index.taro.vue
index d3e4988179..2982b0812a 100644
--- a/src/packages/__VUE/radio/index.taro.vue
+++ b/src/packages/__VUE/radio/index.taro.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
-import { computed, h, inject, PropType, toRefs } from 'vue';
+import { computed, h, inject, PropType, toRef, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('radio');
 import { CheckNormal, CheckChecked } from '@nutui/icons-vue-taro';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { RADIO_KEY, RadioShape, RadioButtonSize } from './types';
-
+import { useFormDisabled } from '../form/common';
 export default create({
   components: {
     CheckNormal,
@@ -34,6 +34,7 @@ export default create({
     }
   },
   setup(props, { slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const { size } = toRefs(props);
     let parent: any = inject(RADIO_KEY, null);
 
@@ -42,7 +43,7 @@ export default create({
     });
 
     const color = computed(() => {
-      return !props.disabled
+      return !disabled.value
         ? isCurValue.value
           ? 'nut-radio__icon'
           : 'nut-radio__icon--unchecked'
@@ -69,7 +70,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ''}`
+          class: `${componentName}__label ${disabled.value ? `${componentName}__label--disabled` : ''}`
         },
         slots.default?.()
       );
@@ -87,7 +88,7 @@ export default create({
     };
 
     const handleClick = () => {
-      if (isCurValue.value || props.disabled) return;
+      if (isCurValue.value || disabled.value) return;
       parent.updateValue(props.label);
     };
 
diff --git a/src/packages/__VUE/radio/index.vue b/src/packages/__VUE/radio/index.vue
index 291566cce4..4b2f74ec64 100644
--- a/src/packages/__VUE/radio/index.vue
+++ b/src/packages/__VUE/radio/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { Component, computed, h, inject, PropType, toRefs } from 'vue';
+import { Component, computed, h, inject, PropType, toRef, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('radio');
 import { CheckNormal, CheckChecked } from '@nutui/icons-vue';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { RADIO_KEY, RadioShape, RadioButtonSize } from './types';
+import { useFormDisabled } from '../form/common';
 
 export default create({
   components: {
@@ -34,6 +35,7 @@ export default create({
     }
   },
   setup(props, { slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const { size } = toRefs(props);
     let parent: any = inject(RADIO_KEY, null);
 
@@ -42,7 +44,7 @@ export default create({
     });
 
     const color = computed(() => {
-      return !props.disabled
+      return !disabled.value
         ? isCurValue.value
           ? 'nut-radio__icon'
           : 'nut-radio__icon--unchecked'
@@ -68,7 +70,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ''}`
+          class: `${componentName}__label ${disabled.value ? `${componentName}__label--disabled` : ''}`
         },
         slots.default?.()
       );
@@ -87,7 +89,7 @@ export default create({
     };
 
     const handleClick = () => {
-      if (isCurValue.value || props.disabled) return;
+      if (isCurValue.value || disabled.value) return;
       parent.updateValue(props.label);
     };
 
diff --git a/src/packages/__VUE/range/index.taro.vue b/src/packages/__VUE/range/index.taro.vue
index 38a94b5750..cbf2924b1e 100644
--- a/src/packages/__VUE/range/index.taro.vue
+++ b/src/packages/__VUE/range/index.taro.vue
@@ -79,11 +79,12 @@
 </template>
 <script lang="ts">
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
-import { ref, toRefs, computed, PropType, CSSProperties, onMounted } from 'vue';
+import { ref, toRefs, computed, PropType, CSSProperties, onMounted, toRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTouch } from '@/packages/utils/useTouch';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { SliderValue } from './type';
+import { useFormDisabled } from '../form/common';
 import { preventDefault } from '@/packages/utils/util';
 const { componentName, create } = createComponent('range');
 
@@ -134,6 +135,7 @@ export default create({
   emits: ['change', 'dragEnd', 'dragStart', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const refRandomId = Math.random().toString(36).slice(-8);
     const state = ref({
       width: 0,
@@ -162,7 +164,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-disabled`]: disabled.value,
         [`${prefixCls}-vertical`]: props.vertical,
         [`${prefixCls}-show-number`]: !props.hiddenRange
       };
@@ -300,7 +302,7 @@ export default create({
     };
 
     const onClick = async (event: any) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       const { min, modelValue } = props;
@@ -340,7 +342,7 @@ export default create({
     };
 
     const onTouchStart = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
 
@@ -369,7 +371,7 @@ export default create({
     };
 
     const onTouchMove = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       preventDefault(event, true);
@@ -396,7 +398,7 @@ export default create({
     };
 
     const onTouchEnd = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       if (dragStatus.value === 'draging') {
@@ -441,7 +443,8 @@ export default create({
       marksStyle,
       marksList,
       tickStyle,
-      refRandomId
+      refRandomId,
+      disabled
     };
   }
 });
diff --git a/src/packages/__VUE/range/index.vue b/src/packages/__VUE/range/index.vue
index b58c48b123..3fb2033d76 100644
--- a/src/packages/__VUE/range/index.vue
+++ b/src/packages/__VUE/range/index.vue
@@ -74,12 +74,13 @@
   </view>
 </template>
 <script lang="ts">
-import { ref, toRefs, computed, PropType, CSSProperties } from 'vue';
+import { ref, toRefs, computed, PropType, CSSProperties, toRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTouch } from '@/packages/utils/useTouch';
 import { useRect } from '@/packages/utils/useRect';
 import { isArray } from '@/packages/utils/util';
 import { SliderValue } from './type';
+import { useFormDisabled } from '../form/common';
 const { componentName, create } = createComponent('range');
 
 export default create({
@@ -130,6 +131,7 @@ export default create({
   emits: ['change', 'dragEnd', 'dragStart', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const buttonIndex = ref(0);
     let startValue: SliderValue;
     let currentValue: SliderValue;
@@ -153,7 +155,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-disabled`]: disabled.value,
         [`${prefixCls}-vertical`]: props.vertical,
         [`${prefixCls}-show-number`]: !props.hiddenRange
       };
@@ -291,7 +293,7 @@ export default create({
     };
 
     const onClick = (event: MouseEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
 
@@ -318,7 +320,7 @@ export default create({
     };
 
     const onTouchStart = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
 
@@ -335,7 +337,7 @@ export default create({
     };
 
     const onTouchMove = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
 
@@ -364,7 +366,7 @@ export default create({
     };
 
     const onTouchEnd = () => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       if (dragStatus.value === 'draging') {
@@ -399,7 +401,8 @@ export default create({
       markClassName,
       marksStyle,
       marksList,
-      tickStyle
+      tickStyle,
+      disabled
     };
   }
 });
diff --git a/src/packages/__VUE/rate/index.taro.vue b/src/packages/__VUE/rate/index.taro.vue
index e84fdd0706..ecb870fee1 100644
--- a/src/packages/__VUE/rate/index.taro.vue
+++ b/src/packages/__VUE/rate/index.taro.vue
@@ -48,10 +48,11 @@
   </view>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref, toRef } from 'vue';
 import { StarFillN } from '@nutui/icons-vue-taro';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
+import { useFormDisabled } from '../form/common';
 const { create } = createComponent('rate');
 export default create({
   props: {
@@ -101,13 +102,14 @@ export default create({
   components: { StarFillN },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit, slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const rateRefs = ref<HTMLElement[]>([]);
     const updateVal = (value: number) => {
       emit('update:modelValue', value);
       emit('change', value);
     };
     const onClick = (e: number, index: number) => {
-      if (props.disabled || props.readonly) return;
+      if (disabled.value || props.readonly) return;
       let value = 0;
       if (index === 1 && props.modelValue === index) {
         value = 0;
@@ -126,7 +128,8 @@ export default create({
       rateRefs,
       refRandomId,
       renderIcon,
-      slots
+      slots,
+      disabled
     };
   }
 });
diff --git a/src/packages/__VUE/rate/index.vue b/src/packages/__VUE/rate/index.vue
index f1592416ee..6e7ff8c044 100644
--- a/src/packages/__VUE/rate/index.vue
+++ b/src/packages/__VUE/rate/index.vue
@@ -48,11 +48,12 @@
   </view>
 </template>
 <script lang="ts">
-import { Ref, ref } from 'vue';
+import { Ref, ref, toRef } from 'vue';
 import { StarFillN } from '@nutui/icons-vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
+import { useFormDisabled } from '../form/common';
 const { create } = createComponent('rate');
 export default create({
   props: {
@@ -106,13 +107,14 @@ export default create({
   components: { StarFillN },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit, slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const rateRefs = ref<HTMLElement[]>([]);
     const updateVal = (value: number) => {
       emit('update:modelValue', value);
       emit('change', value);
     };
     const onClick = (e: number, index: number) => {
-      if (props.disabled || props.readonly) return;
+      if (disabled.value || props.readonly) return;
       let value = 0;
       if (index === 1 && props.modelValue === index) {
         value = 0;
@@ -164,7 +166,8 @@ export default create({
       rateRefs,
       refRandomId,
       renderIcon,
-      slots
+      slots,
+      disabled
     };
   }
 });
diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue
index 322a09f3b7..d9e7618a32 100644
--- a/src/packages/__VUE/searchbar/index.taro.vue
+++ b/src/packages/__VUE/searchbar/index.taro.vue
@@ -53,11 +53,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSProperties } from 'vue';
+import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSProperties, toRef } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { CircleClose } from '@nutui/icons-vue-taro';
 import { SearchbarConfirmType, SearchbarInputAlign, SearchbarShape } from './types';
 import { useLocale } from '@/packages/utils/useLocale';
+import { useFormDisabled } from '../form/common';
 const { create } = createComponent('searchbar');
 
 const cN = 'NutSearchbar';
@@ -147,6 +148,7 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const translate = useLocale(cN);
     const state = reactive({
       active: false
@@ -248,7 +250,8 @@ export default create({
       clickInput,
       leftIconClick,
       rightIconClick,
-      styleSearchbar
+      styleSearchbar,
+      disabled
     };
   }
 });
diff --git a/src/packages/__VUE/searchbar/index.vue b/src/packages/__VUE/searchbar/index.vue
index b25f21683d..4e3d6df881 100644
--- a/src/packages/__VUE/searchbar/index.vue
+++ b/src/packages/__VUE/searchbar/index.vue
@@ -55,11 +55,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted, ref, Ref, CSSProperties, PropType } from 'vue';
+import { toRefs, reactive, computed, onMounted, ref, Ref, CSSProperties, PropType, toRef } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { CircleClose } from '@nutui/icons-vue';
 import { SearchbarInputAlign, SearchbarShape } from './types';
 import { useLocale } from '@/packages/utils/useLocale';
+import { useFormDisabled } from '../form/common';
 const { create } = createComponent('searchbar');
 
 const cN = 'NutSearchbar';
@@ -145,6 +146,7 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const translate = useLocale(cN);
     const state = reactive({
       active: false
@@ -246,7 +248,8 @@ export default create({
       clickInput,
       leftIconClick,
       rightIconClick,
-      styleSearchbar
+      styleSearchbar,
+      disabled
     };
   }
 });
diff --git a/src/packages/__VUE/switch/index.taro.vue b/src/packages/__VUE/switch/index.taro.vue
index c1b0309ff8..dd0e3fd2ec 100644
--- a/src/packages/__VUE/switch/index.taro.vue
+++ b/src/packages/__VUE/switch/index.taro.vue
@@ -13,9 +13,10 @@
 </template>
 
 <script lang="ts">
-import { computed, watch } from 'vue';
+import { computed, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading1 } from '@nutui/icons-vue-taro';
+import { useFormDisabled } from '../form/common';
 const { componentName, create } = createComponent('switch');
 
 export default create({
@@ -60,13 +61,14 @@ export default create({
   },
   emits: ['change', 'update:modelValue', 'update:loading'],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disable'));
     const isActive = computed(() => props.modelValue === props.activeValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
         [isActive.value ? 'nut-switch-open' : 'nut-switch-close']: true,
-        [`${prefixCls}-disable`]: props.disable,
+        [`${prefixCls}-disable`]: disabled.value,
         [`${prefixCls}-base`]: true
       };
     });
@@ -80,7 +82,7 @@ export default create({
     let updateType = '';
 
     const onClick = (event: Event) => {
-      if (props.disable || props.loading) return;
+      if (props.loading || disabled.value) return;
       const value = isActive.value ? props.inactiveValue : props.activeValue;
       updateType = 'click';
       emit('update:modelValue', value);
diff --git a/src/packages/__VUE/switch/index.vue b/src/packages/__VUE/switch/index.vue
index 8ff927379e..2fef600682 100644
--- a/src/packages/__VUE/switch/index.vue
+++ b/src/packages/__VUE/switch/index.vue
@@ -13,9 +13,10 @@
 </template>
 
 <script lang="ts">
-import { computed, watch } from 'vue';
+import { computed, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading1 } from '@nutui/icons-vue';
+import { useFormDisabled } from '../form/common';
 const { componentName, create } = createComponent('switch');
 
 export default create({
@@ -60,13 +61,14 @@ export default create({
   },
   emits: ['change', 'update:modelValue', 'update:loading'],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disable'));
     const isActive = computed(() => props.modelValue === props.activeValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
         [isActive.value ? 'nut-switch-open' : 'nut-switch-close']: true,
-        [`${prefixCls}-disable`]: props.disable,
+        [`${prefixCls}-disable`]: disabled.value,
         [`${prefixCls}-base`]: true
       };
     });
@@ -80,7 +82,7 @@ export default create({
     let updateType = '';
 
     const onClick = (event: Event) => {
-      if (props.disable || props.loading) return;
+      if (props.loading || disabled.value) return;
       const value = isActive.value ? props.inactiveValue : props.activeValue;
       updateType = 'click';
       emit('update:modelValue', value);
diff --git a/src/packages/__VUE/textarea/index.taro.vue b/src/packages/__VUE/textarea/index.taro.vue
index e978d3590d..742e7ecb99 100644
--- a/src/packages/__VUE/textarea/index.taro.vue
+++ b/src/packages/__VUE/textarea/index.taro.vue
@@ -24,10 +24,11 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
 import { useLocale } from '@/packages/utils/useLocale';
+import { useFormDisabled } from '../form/common';
 
 export interface InputTarget extends HTMLInputElement {
   composing?: boolean;
@@ -84,12 +85,13 @@ export default create({
   emits: ['update:modelValue', 'change', 'blur', 'focus'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const translate = useLocale(cN);
     const classes = computed(() => {
       const prefixCls = 'nut-textarea';
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled
+        [`${prefixCls}--disabled`]: disabled.value
       };
     });
 
@@ -134,13 +136,13 @@ export default create({
     };
 
     const focus = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       emit('focus', event);
     };
 
     const blur = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       const input = event.target as HTMLInputElement;
       let value = input.value;
@@ -256,6 +258,7 @@ export default create({
       textareaRef,
       classes,
       styles,
+      disabled,
       change,
       focus,
       blur,
diff --git a/src/packages/__VUE/textarea/index.vue b/src/packages/__VUE/textarea/index.vue
index 78421864df..f7f8f84eca 100644
--- a/src/packages/__VUE/textarea/index.vue
+++ b/src/packages/__VUE/textarea/index.vue
@@ -23,9 +23,10 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
 <script lang="ts">
-import { watch, ref, computed, onMounted, nextTick } from 'vue';
+import { watch, ref, computed, onMounted, nextTick, toRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useLocale } from '@/packages/utils/useLocale';
+import { useFormDisabled } from '../form/common';
 
 export interface InputTarget extends HTMLInputElement {
   composing: boolean;
@@ -81,13 +82,14 @@ export default create({
   emits: ['update:modelValue', 'change', 'blur', 'focus'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const translate = useLocale(cN);
     const textareaRef = ref();
     const classes = computed(() => {
       const prefixCls = 'nut-textarea';
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled
+        [`${prefixCls}--disabled`]: disabled.value
       };
     });
 
@@ -156,13 +158,13 @@ export default create({
     };
 
     const focus = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       emit('focus', event);
     };
 
     const blur = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       const input = event.target as HTMLInputElement;
 
@@ -187,6 +189,7 @@ export default create({
       textareaRef,
       classes,
       styles,
+      disabled,
       change,
       focus,
       blur,
diff --git a/src/packages/__VUE/uploader/index.taro.vue b/src/packages/__VUE/uploader/index.taro.vue
index acd47f1ee9..52c5041174 100644
--- a/src/packages/__VUE/uploader/index.taro.vue
+++ b/src/packages/__VUE/uploader/index.taro.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, reactive, ref, watch } from 'vue';
+import { PropType, reactive, ref, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { UploaderTaro, UploadOptions } from './uploader';
 import { FileItem, MediaType, SizeType, SourceType } from './type';
@@ -81,6 +81,7 @@ import NutButton from '../button/index.taro';
 import Taro from '@tarojs/taro';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue-taro';
 import { useLocale } from '@/packages/utils/useLocale';
+import { useFormDisabled } from '../form/common';
 
 const { create } = createComponent('uploader');
 const cN = 'NutUploader';
@@ -163,6 +164,7 @@ export default create({
     'fileItemClick'
   ],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const translate = useLocale(cN);
     const fileList = ref(props.fileList as Array<FileItem>);
     const uploadQueue = ref<Promise<UploaderTaro>[]>([]);
@@ -175,7 +177,7 @@ export default create({
     );
 
     const chooseImage = () => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
 
@@ -406,6 +408,7 @@ export default create({
     };
 
     const onDelete = (file: FileItem, index: number) => {
+      if (disabled.value) return;
       clearUploadQueue(index);
       funInterceptor(props.beforeDelete, {
         args: [file, fileList.value],
@@ -416,6 +419,7 @@ export default create({
     return {
       onDelete,
       fileList,
+      disabled,
       chooseImage,
       fileItemClick,
       clearUploadQueue,
diff --git a/src/packages/__VUE/uploader/index.vue b/src/packages/__VUE/uploader/index.vue
index aeb475be10..327e417d59 100644
--- a/src/packages/__VUE/uploader/index.vue
+++ b/src/packages/__VUE/uploader/index.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, h, PropType, ref, watch } from 'vue';
+import { reactive, h, PropType, ref, watch, toRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Uploader, UploadOptions } from './uploader';
 import { FileItem } from './type';
@@ -79,6 +79,7 @@ import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import NutProgress from '../progress/index.vue';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue';
 import { useLocale } from '@/packages/utils/useLocale';
+import { useFormDisabled } from '../form/common';
 
 const { create } = createComponent('uploader');
 const cN = 'NutUploader';
@@ -143,6 +144,7 @@ export default create({
     'fileItemClick'
   ],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const translate = useLocale(cN);
     const fileList = ref(props.fileList as Array<FileItem>);
     const uploadQueue = ref<Promise<Uploader>[]>([]);
@@ -161,7 +163,7 @@ export default create({
         accept: props.accept,
         multiple: props.multiple,
         name: props.name,
-        disabled: props.disabled
+        disabled: disabled.value
       };
 
       if (props.capture) {
@@ -317,6 +319,7 @@ export default create({
     };
 
     const onDelete = (file: FileItem, index: number) => {
+      if (disabled.value) return;
       clearUploadQueue(index);
       funInterceptor(props.beforeDelete, {
         args: [file, fileList.value],
@@ -325,7 +328,7 @@ export default create({
     };
 
     const onChange = (event: InputEvent) => {
-      if (props.disabled) {
+      if (props.disabled || disabled.value) {
         return;
       }
       const $el = event.target as HTMLInputElement;