From 149cde1ce1ba962ae657434bddb341b62682705c Mon Sep 17 00:00:00 2001
From: Mikasa33 <mikasa33@qq.com>
Date: Wed, 30 Dec 2020 17:31:40 +0800
Subject: [PATCH] feat(Form): add disabled and readonly prop (#7830)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Form): add disabled and readonly prop

* chore(Field): 使用 getProp 方法

* fix(Field): 将 computed 改为直接取值
---
 src/field/index.js       | 48 +++++++++++++++++++++++++---------------
 src/form/README.md       |  2 ++
 src/form/README.zh-CN.md |  2 ++
 src/form/index.js        |  2 ++
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/field/index.js b/src/field/index.js
index ad32b9ee2..047998428 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -40,8 +40,14 @@ export default createComponent({
     rows: [Number, String],
     name: String,
     rules: Array,
-    disabled: Boolean,
-    readonly: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
     autosize: [Boolean, Object],
     leftIcon: String,
     rightIcon: String,
@@ -103,8 +109,21 @@ export default createComponent({
     const inputRef = ref();
     const childFieldValue = ref();
 
+    const { parent: form } = useParent(FORM_KEY);
+
+    const getProp = (key) => {
+      if (isDef(props[key])) {
+        return props[key];
+      }
+      if (form && isDef(form.props[key])) {
+        return form.props[key];
+      }
+    };
+
     const showClear = computed(() => {
-      if (props.clearable && !props.readonly) {
+      const readonly = getProp('readonly');
+
+      if (props.clearable && !readonly) {
         const hasValue = isDef(props.modelValue) && props.modelValue !== '';
         const trigger =
           props.clearTrigger === 'always' ||
@@ -199,8 +218,6 @@ export default createComponent({
         });
       });
 
-    const { parent: form } = useParent(FORM_KEY);
-
     const validateWithTrigger = (trigger) => {
       if (form && props.rules) {
         const defaultTrigger = form.props.validateTrigger === trigger;
@@ -272,7 +289,8 @@ export default createComponent({
       emit('focus', event);
 
       // readonly not work in lagacy mobile safari
-      if (props.readonly) {
+      const readonly = getProp('readonly');
+      if (readonly) {
         blur();
       }
     };
@@ -312,15 +330,6 @@ export default createComponent({
       }
     });
 
-    const getProp = (key) => {
-      if (isDef(props[key])) {
-        return props[key];
-      }
-      if (form && isDef(form.props[key])) {
-        return form.props[key];
-      }
-    };
-
     const labelStyle = computed(() => {
       const labelWidth = getProp('labelWidth');
       if (labelWidth) {
@@ -384,6 +393,8 @@ export default createComponent({
     };
 
     const renderInput = () => {
+      const disabled = getProp('disabled');
+      const readonly = getProp('readonly');
       const inputAlign = getProp('inputAlign');
 
       if (slots.input) {
@@ -403,8 +414,8 @@ export default createComponent({
         rows: props.rows,
         class: bem('control', inputAlign),
         value: props.modelValue,
-        disabled: props.disabled,
-        readonly: props.readonly,
+        disabled,
+        readonly,
         placeholder: props.placeholder,
         onBlur,
         onFocus,
@@ -539,6 +550,7 @@ export default createComponent({
     });
 
     return () => {
+      const disabled = getProp('disabled');
       const labelAlign = getProp('labelAlign');
       const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
@@ -554,7 +566,7 @@ export default createComponent({
           icon={props.leftIcon}
           class={bem({
             error: showError.value,
-            disabled: props.disabled,
+            disabled,
             [`label-${labelAlign}`]: labelAlign,
             'min-height': props.type === 'textarea' && !props.autosize,
           })}
diff --git a/src/form/README.md b/src/form/README.md
index 81b121221..443a5347c 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -471,6 +471,8 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
+| disabled | Whether to disable field | _boolean_ | `false` |
+| readonly | Whether to be readonly | _boolean_ | `false` |
 | label-width | Field label width | _number \| string_ | `6.2em` |
 | label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index 17e2a8473..d93057338 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -504,6 +504,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| disabled | 是否禁用输入框 | _boolean_ | `false` |
+| readonly | 是否只读 | _boolean_ | `false` |
 | label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6.2em` |
 | label-align |  表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
diff --git a/src/form/index.js b/src/form/index.js
index 4e1c5d9b9..c12a90ec0 100644
--- a/src/form/index.js
+++ b/src/form/index.js
@@ -7,6 +7,8 @@ const [createComponent, bem] = createNamespace('form');
 
 export default createComponent({
   props: {
+    disabled: Boolean,
+    readonly: Boolean,
     colon: Boolean,
     labelWidth: [Number, String],
     labelAlign: String,