feat(Textarea): support readonly (#1100)

Tencent · Sep 19, 2023 · fcab982 · fcab982
1 parent fefb8bc
commit fcab982
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 1 deletion.
diff --git a/src/common.ts b/src/common.ts
@@ -75,6 +75,11 @@ export type CSSSelector = string;
 export interface KeysType {
   value?: string;
   label?: string;
+  disabled?: string;
+}
+
+export interface TreeKeysType extends KeysType {
+  children?: string;
 }
 
 export interface HTMLElementAttributes {

diff --git a/src/textarea/props.ts b/src/textarea/props.ts
@@ -57,6 +57,8 @@ export default {
     type: String,
     default: undefined,
   },
+  /** 只读状态 */
+  readonly: Boolean,
   /** 文本框值 */
   value: {
     type: [String, Number] as PropType<TdTextareaProps['value']>,

diff --git a/src/textarea/textarea.en-US.md b/src/textarea/textarea.en-US.md
@@ -17,6 +17,7 @@ maxcharacter | Number | - | \- | N
 maxlength | Number | - | \- | N
 name | String | - | \- | N
 placeholder | String | undefined | \- | N
+readonly | Boolean | false | \- | N
 value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N
 onBlur | Function |  | Typescript：`(value: TextareaValue, context: { e: FocusEvent }) => void`<br/> | N

diff --git a/src/textarea/textarea.md b/src/textarea/textarea.md
@@ -17,6 +17,7 @@ maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中
 maxlength | Number | - | 用户最多可以输入的字符个数 | N
 name | String | - | 名称，HTML 元素原生属性 | N
 placeholder | String | undefined | 占位符 | N
+readonly | Boolean | false | 只读状态 | N
 value | String / Number | - | 文本框值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N
 defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N
 onBlur | Function |  | TS 类型：`(value: TextareaValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N

diff --git a/src/textarea/textarea.vue b/src/textarea/textarea.vue
@@ -13,6 +13,7 @@
         :maxlength="maxlength"
         :disabled="disabled"
         :placeholder="placeholder"
+        :readonly="readonly"
         @focus="handleFocus"
         @blur="handleBlur"
         @input="handleInput"
@@ -26,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ref, onMounted, defineComponent, getCurrentInstance, toRefs, nextTick, watch } from 'vue';
+import { computed, ref, onMounted, defineComponent, getCurrentInstance, toRefs, nextTick, watch, readonly } from 'vue';
 import { renderTNode, TNode, getCharacterLength, useVModel } from '../shared';
 import config from '../config';
 import TextareaProps from './props';
@@ -64,6 +65,7 @@ export default defineComponent({
       `${componentName}__wrapper-inner`,
       {
         [`${componentName}--disabled`]: disabled.value,
+        [`${componentName}--readonly`]: props.readonly,
       },
     ]);
     const internalInstance = getCurrentInstance();

diff --git a/src/textarea/type.ts b/src/textarea/type.ts
@@ -64,6 +64,11 @@ export interface TdTextareaProps {
    * 占位符
    */
   placeholder?: string;
+  /**
+   * 只读状态
+   * @default false
+   */
+  readonly?: boolean;
   /**
    * 文本框值
    */