From 8da1e23d53219652ccf1882c0d0eb8b9c753a5a1 Mon Sep 17 00:00:00 2001
From: Mikasa33 <mikasa33@qq.com>
Date: Wed, 30 Dec 2020 17:29:42 +0800
Subject: [PATCH] feat(Form): add disabled and readonly prop (#7829)
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       | 26 +++++++++++++++++++-------
 src/form/README.md       |  2 ++
 src/form/README.zh-CN.md |  2 ++
 src/form/index.js        |  2 ++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/field/index.js b/src/field/index.js
index 994bff946..01c865259 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -37,8 +37,14 @@ export default createComponent({
     ...cellProps,
     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,
@@ -113,7 +119,9 @@ export default createComponent({
 
   computed: {
     showClear() {
-      if (this.clearable && !this.readonly) {
+      const readonly = this.getProp('readonly');
+
+      if (this.clearable && !readonly) {
         const hasValue = isDef(this.value) && this.value !== '';
         const trigger =
           this.clearTrigger === 'always' ||
@@ -339,7 +347,8 @@ export default createComponent({
 
       // readonly not work in lagacy mobile safari
       /* istanbul ignore if */
-      if (this.readonly) {
+      const readonly = this.getProp('readonly');
+      if (readonly) {
         this.blur();
       }
     },
@@ -418,6 +427,8 @@ export default createComponent({
 
     genInput() {
       const { type } = this;
+      const disabled = this.getProp('disabled');
+      const readonly = this.getProp('readonly');
       const inputSlot = this.slots('input');
       const inputAlign = this.getProp('inputAlign');
 
@@ -441,8 +452,8 @@ export default createComponent({
         attrs: {
           ...this.$attrs,
           name: this.name,
-          disabled: this.disabled,
-          readonly: this.readonly,
+          disabled,
+          readonly,
           placeholder: this.placeholder,
         },
         on: this.listeners,
@@ -559,6 +570,7 @@ export default createComponent({
 
   render() {
     const { slots } = this;
+    const disabled = this.getProp('disabled');
     const labelAlign = this.getProp('labelAlign');
 
     const scopedSlots = {
@@ -591,7 +603,7 @@ export default createComponent({
         arrowDirection={this.arrowDirection}
         class={bem({
           error: this.showError,
-          disabled: this.disabled,
+          disabled,
           [`label-${labelAlign}`]: labelAlign,
           'min-height': this.type === 'textarea' && !this.autosize,
         })}
diff --git a/src/form/README.md b/src/form/README.md
index df0627506..9dd90f8ac 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -427,6 +427,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 89491f4ae..72e1f208d 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -458,6 +458,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 225b910a6..807306352 100644
--- a/src/form/index.js
+++ b/src/form/index.js
@@ -5,6 +5,8 @@ const [createComponent, bem] = createNamespace('form');
 
 export default createComponent({
   props: {
+    disabled: Boolean,
+    readonly: Boolean,
     colon: Boolean,
     labelWidth: [Number, String],
     labelAlign: String,