From f333d8fda57fc1c6f9fdcaf93d84219fb49debb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?haishancai=28=E8=94=A1=E6=B5=B7=E7=8F=8A=29?= Date: Wed, 19 Jun 2024 17:16:29 +0800 Subject: [PATCH 1/3] feat: textarea --- package-lock.json | 8 ++++---- site/sidebar.config.ts | 6 ++++++ src/index.ts | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea9b30e6..22f935fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "@tencent/tdesign-web-components", - "version": "0.0.0", + "name": "tdesign-web-components", + "version": "0.0.1-alpha.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "@tencent/tdesign-web-components", - "version": "0.0.0", + "name": "tdesign-web-components", + "version": "0.0.1-alpha.0", "license": "MIT", "dependencies": { "@babel/runtime": "^7.24.7", diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts index 68305137..59a56ad2 100644 --- a/site/sidebar.config.ts +++ b/site/sidebar.config.ts @@ -91,6 +91,12 @@ export default [ path: '/components/switch', // component: () => import('tdesign-web-components/switch/README.md'), }, + { + title: 'Textarea 文本框', + name: 'textarea', + path: '/components/textarea', + component: () => import('tdesign-web-components/textarea/README.md'), + }, ], }, { diff --git a/src/index.ts b/src/index.ts index b76d4d99..c9b542f2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,3 @@ export * from './button'; export * from './icon'; +export * from './textarea'; From a05b28c95b86d6cbac03c0b4cb2909f003b816ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?haishancai=28=E8=94=A1=E6=B5=B7=E7=8F=8A=29?= Date: Wed, 19 Jun 2024 17:24:58 +0800 Subject: [PATCH 2/3] feat: textarea --- src/textarea/README.md | 52 +++++++++ src/textarea/_example/base.tsx | 12 ++ src/textarea/_example/event.tsx | 39 +++++++ src/textarea/_example/limit.tsx | 11 ++ src/textarea/_example/status.tsx | 13 +++ src/textarea/index.ts | 9 ++ src/textarea/style/index.js | 11 ++ src/textarea/textarea.tsx | 186 +++++++++++++++++++++++++++++++ src/textarea/type.ts | 92 +++++++++++++++ 9 files changed, 425 insertions(+) create mode 100644 src/textarea/README.md create mode 100644 src/textarea/_example/base.tsx create mode 100644 src/textarea/_example/event.tsx create mode 100644 src/textarea/_example/limit.tsx create mode 100644 src/textarea/_example/status.tsx create mode 100644 src/textarea/index.ts create mode 100644 src/textarea/style/index.js create mode 100644 src/textarea/textarea.tsx create mode 100644 src/textarea/type.ts diff --git a/src/textarea/README.md b/src/textarea/README.md new file mode 100644 index 00000000..6fa0b411 --- /dev/null +++ b/src/textarea/README.md @@ -0,0 +1,52 @@ +--- +title: Textarea 文本框 +description: 通过鼠标或键盘输入多行内容。 +isComponent: true +usage: { title: '', description: '' } +spline: base +--- + +### 基础使用 + +{{ base }} + +### 自定义事件 + +{{ event }} + +### 字数限制 + +{{ limit }} + +### 自定义状态 + +{{ status }} + + + + +## API + +### Textarea Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +allowInputOverMax | Boolean | false | 超出`maxlength`或`maxcharacter`之后是否还允许输入 | N +autofocus | Boolean | false | 自动聚焦，拉起键盘 | N +autosize | Boolean/Object | false | 高度自动撑开。Object属性：`minRows：number,maxRows：number`。autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度 | N +disabled | Boolean | false | 是否禁用文本框 | N +label | TNode | - | 左侧文本 | N +maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N +maxlength | Number | - | 用户最多可以输入的字符个数 | N +name | String | - | 名称 | N +placeholder | String | '' | 占位符 | N +readonly | Boolean | false | 只读状态 | N +status | String | - | 文本框状态。可选项：`default/success/warning/error` | N +tips | TNode | - | 输入框下方提示文本 | N +value | String | - | 文本框值 | N +defaultValue | String | - | 文本框值，非受控属性 | N +onBlur | Function | | TS 类型：`(value: string, context: FocusEvent) => void`
失去焦点时触发 | N +onFocus | Function | | TS 类型：`(value: string, context: FocusEvent) => void`
获得焦点时触发 | N +onKeydown | Function | | TS 类型：`(value: string, context: KeyboardEvent) => void`
键盘按下时触发 | N +onKeypress | Function | | TS 类型：`(value: string, context: KeyboardEvent) => void`
按下字符键时触发 | N +onKeyup | Function | | TS 类型：`(value: string, context: KeyboardEvent) => void`
释放键盘时触发 | N diff --git a/src/textarea/_example/base.tsx b/src/textarea/_example/base.tsx new file mode 100644 index 00000000..ff4ca5c2 --- /dev/null +++ b/src/textarea/_example/base.tsx @@ -0,0 +1,12 @@ +import 'tdesign-web-components/textarea'; + +export default function Textarea() { + + return ( +
+ + + +
+ ); +} diff --git a/src/textarea/_example/event.tsx b/src/textarea/_example/event.tsx new file mode 100644 index 00000000..c604ef10 --- /dev/null +++ b/src/textarea/_example/event.tsx @@ -0,0 +1,39 @@ +import 'tdesign-web-components/textarea'; + +export default function Textarea() { + + const value='' + + const onBlur = (value,{ e }) =>{ + console.log('onBlur: ', value, e); + } + + const onFocus = (value,{ e }) =>{ + console.log('onFocus: ', value, e); + } + + const onKeyup = (value,{ e }) =>{ + console.log('onKeyup', value, e) + } + + const onKeypress = (value,{ e }) =>{ + console.log('onKeypress', value, e) + } + + const onKeydown = (value,{ e }) =>{ + console.log('onKeydown', value, e) + } + + return ( + + ) + } + diff --git a/src/textarea/_example/limit.tsx b/src/textarea/_example/limit.tsx new file mode 100644 index 00000000..cf07bf50 --- /dev/null +++ b/src/textarea/_example/limit.tsx @@ -0,0 +1,11 @@ +import 'tdesign-web-components/textarea'; + +export default function Textarea() { + return ( + + + + ) + + } + diff --git a/src/textarea/_example/status.tsx b/src/textarea/_example/status.tsx new file mode 100644 index 00000000..93c37c59 --- /dev/null +++ b/src/textarea/_example/status.tsx @@ -0,0 +1,13 @@ +import 'tdesign-web-components/textarea'; + +export default function Textarea() { + return ( + + + + + + + + ) + } diff --git a/src/textarea/index.ts b/src/textarea/index.ts new file mode 100644 index 00000000..087aa5db --- /dev/null +++ b/src/textarea/index.ts @@ -0,0 +1,9 @@ +import './style/index.js'; + +import _Textarea from './textarea'; + +export type { TextareaProps } from './textarea'; +export const Textarea = _Textarea; +export default Textarea; + +export * from './type'; diff --git a/src/textarea/style/index.js b/src/textarea/style/index.js new file mode 100644 index 00000000..ea3d74ca --- /dev/null +++ b/src/textarea/style/index.js @@ -0,0 +1,11 @@ +import { css, globalCSS } from 'omi'; + +// 为了做主题切换 +import styles from '../../_common/style/web/components/textarea/_index.less'; + +export const styleSheet = css` + ${styles} +`; + +globalCSS(styleSheet); + diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx new file mode 100644 index 00000000..49b78a8c --- /dev/null +++ b/src/textarea/textarea.tsx @@ -0,0 +1,186 @@ +import { classNames, Component, createRef, OmiProps, tag } from 'omi'; + +import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; +import { getCharacterLength, limitUnicodeMaxLength } from '../_common/js/utils/helper'; +import { getClassPrefix } from '../utils'; +import { TdTextareaProps } from './type'; + +export type TextareaProps = TdTextareaProps; +@tag('t-textarea') +export default class Textarea extends Component { + static css = []; + + constructor() { + super(); + this.props = { + allowInputOverMax: false, + autofocus: false, + autosize: false, + disabled: false, + readonly: false, + value: '', + ...this.props, + }; + } + + value = ''; + + isFocused = false; + + eventPropsNames; + + eventProps; + + classPrefix = getClassPrefix(); + + installed() { + const { + value, + disabled, + maxlength, + maxcharacter, + readonly, + autofocus, + style, + autosize, + status, + tips, + allowInputOverMax, + ...otherProps + } = this.props; + this.value = value; + this.eventPropsNames = Object.keys(otherProps).filter((key) => /^on[A-Z]/.test(key)); + this.eventProps = this.eventPropsNames.reduce((eventProps, key) => { + Object.assign(eventProps, { + [key]: (e) => { + if (disabled) return; + if (key === 'onFocus') { + this.isFocused = true; + this.update(); + } + if (key === 'onBlur') { + this.isFocused = false; + this.update(); + } + this.props[key](e.currentTarget.value, { e }); + e.stopPropagation(); + }, + }); + return eventProps; + }, {}); + + this.update(); + + const node = this.textArea.current; + this.value = node.value; + + if (autosize === true) { + node.addEventListener('input', () => { + const heightObj = calcTextareaHeight(node); + const clacMinHeight = heightObj.minHeight; + const clacHeight = heightObj.height; + node.style.minHeight = clacMinHeight; + node.style.height = clacHeight; + }); + } else if (typeof autosize === 'object') { + node.addEventListener('input', () => { + const heightObj = calcTextareaHeight(node, autosize?.minRows, autosize?.maxRows); + const clacMinHeight = heightObj.minHeight; + const clacHeight = heightObj.height; + node.style.minHeight = clacMinHeight; + node.style.height = clacHeight; + }); + } + + const maxLength = maxcharacter; + if (maxLength) { + node.addEventListener('input', () => { + const text = node.value; + const length = this.countCharacters(text); + if (length > maxLength) { + if (text[text.length - 1].match('/[\u4e00-\u9fa5]/g')) { + node.value = text.slice(0, maxLength - 1); + } else { + node.value = text.slice(0, maxLength); + } + } + }); + } + } + + countCharacters(text: string) { + // 按照一个中文汉字等于一个字符长度计算 + const chineseCharacterRegex = /[\u4e00-\u9fa5]/g; + const chineseCharacters = text.match(chineseCharacterRegex) || []; + return text.length + chineseCharacters.length; + } + + // textarea ref + textArea = createRef(); + + getTextareaStatus(status: string) { + return `${this.classPrefix}-is-${status || ''}`; + } + + getTipsStyle(status: string) { + return `${this.classPrefix}-textarea__tips--${status}`; + } + + getTextareaIsDisabled(disabled: boolean) { + return `${this.classPrefix}-is-${disabled ? 'disabled' : ''}`; + } + + textareaClassPrefix = `${this.classPrefix}-textarea`; + + cls() { + return classNames(`${this.textareaClassPrefix}__inner`, { + [`${this.classPrefix}-is-${this.props.status}`]: this.props.status, + [`${this.classPrefix}-is-disabled`]: this.props.disabled, + [`${this.classPrefix}-is-focused`]: this.isFocused, + [`${this.classPrefix}-resize-none`]: typeof this.props.autosize === 'object', + }); + } + + inputValueChangeHandle = (e: Event) => { + console.log('inputValueChangeHandle', e); + const { target } = e; + let val = (target as HTMLInputElement).value; + if (!this.props.allowInputOverMax && !this.textArea.current) { + val = limitUnicodeMaxLength(val, this.props.maxlength); + if (this.props.maxcharacter && this.props.maxcharacter >= 0) { + const stringInfo = getCharacterLength(val, this.props.maxcharacter); + val = typeof stringInfo === 'object' && stringInfo.characters; + } + } + // setValue(val, { e }); + this.value = val; + this.update(); + }; + + render(props: OmiProps) { + const { autofocus, placeholder, readonly, status, disabled, tips, maxlength, maxcharacter } = props; + + return ( + <> +
+ + {tips &&
{tips}
} +
+ + ); + } +} diff --git a/src/textarea/type.ts b/src/textarea/type.ts new file mode 100644 index 00000000..88ff018c --- /dev/null +++ b/src/textarea/type.ts @@ -0,0 +1,92 @@ +import { TNode } from '../common' + +export interface TdTextareaProps { + /** + * 超出maxlength或maxcharacter之后是否还允许输入 + * @default false + */ + allowInputOverMax?: boolean + /** + * 自动聚焦，拉起键盘 + * @default false + */ + autofocus?: boolean + /** + * 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度 + * @default false + */ + autosize?: boolean | { minRows?: number; maxRows?: number } + /** + * 是否禁用文本框 + * @default false + */ + disabled?: boolean + /** + * 左侧文本 + */ + label?: TNode + /** + * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 + */ + maxcharacter?: number + /** + * 用户最多可以输入的字符个数 + */ + maxlength?: number + /** + * 名称，HTML 元素原生属性 + * @default '' + */ + name?: string + /** + * 占位符 + */ + placeholder?: string + /** + * 只读状态 + * @default false + */ + readonly?: boolean + /** + * 文本框状态 + */ + status?: 'default' | 'success' | 'warning' | 'error' + /** + * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 + */ + tips?: TNode + /** + * 文本框值 + */ + value?: TextareaValue + /** + * 文本框值，非受控属性 + */ + defaultValue?: TextareaValue + /** + * 失去焦点时触发 + */ + onBlur?: (value: TextareaValue, context: { e: FocusEvent }) => void + /** + * 输入内容变化时触发: TODO: FormEvent? + */ + onChange?: (value: TextareaValue, context?: { e?: Event }) => void + /** + * 获得焦点时触发 + */ + onFocus?: (value: TextareaValue, context: { e: FocusEvent }) => void + /** + * 键盘按下时触发 + */ + onKeydown?: (value: TextareaValue, context: { e: KeyboardEvent }) => void + /** + * 按下字符键时触发（keydown -> keypress -> keyup） + */ + onKeypress?: (value: TextareaValue, context: { e: KeyboardEvent }) => void + /** + * 释放键盘时触发 + */ + onKeyup?: (value: TextareaValue, context: { e: KeyboardEvent }) => void +} + +export type TextareaValue = string From ab3eae237c19672d50999fc36fa39399a2c59d88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?haishancai=28=E8=94=A1=E6=B5=B7=E7=8F=8A=29?= Date: Fri, 21 Jun 2024 17:14:03 +0800 Subject: [PATCH 3/3] feat: textarea --- src/textarea/README.md | 7 ++ src/textarea/_example/event.tsx | 66 ++++++++++--------- src/textarea/_example/limit.tsx | 19 +++--- src/textarea/_example/status.tsx | 22 ++++--- src/textarea/textarea.tsx | 107 ++++++++++++++----------------- src/textarea/type.ts | 46 ++++++------- 6 files changed, 134 insertions(+), 133 deletions(-) diff --git a/src/textarea/README.md b/src/textarea/README.md index 6fa0b411..f6bb4ccc 100644 --- a/src/textarea/README.md +++ b/src/textarea/README.md @@ -8,6 +8,8 @@ spline: base ### 基础使用 +高度自适应 + {{ base }} ### 自定义事件 @@ -16,10 +18,14 @@ spline: base ### 字数限制 +支持中文和英文字符数限制 + {{ limit }} ### 自定义状态 +支持禁用、只读，和default/success/warning/error四种status状态 + {{ status }} @@ -50,3 +56,4 @@ onFocus | Function | | TS 类型：`(value: string, context: FocusEvent) => voi onKeydown | Function | | TS 类型：`(value: string, context: KeyboardEvent) => void`
键盘按下时触发 | N onKeypress | Function | | TS 类型：`(value: string, context: KeyboardEvent) => void`
按下字符键时触发 | N onKeyup | Function | | TS 类型：`(value: string, context: KeyboardEvent) => void`
释放键盘时触发 | N +onChange | Function | | TS 类型：`(value: string, context: Event) => void`
输入内容变化时触发 | N diff --git a/src/textarea/_example/event.tsx b/src/textarea/_example/event.tsx index c604ef10..4763bef5 100644 --- a/src/textarea/_example/event.tsx +++ b/src/textarea/_example/event.tsx @@ -1,39 +1,41 @@ import 'tdesign-web-components/textarea'; export default function Textarea() { + const value = ''; - const value='' - - const onBlur = (value,{ e }) =>{ + const onBlur = (value, { e }) => { console.log('onBlur: ', value, e); - } + }; - const onFocus = (value,{ e }) =>{ + const onFocus = (value, { e }) => { console.log('onFocus: ', value, e); - } - - const onKeyup = (value,{ e }) =>{ - console.log('onKeyup', value, e) - } - - const onKeypress = (value,{ e }) =>{ - console.log('onKeypress', value, e) - } - - const onKeydown = (value,{ e }) =>{ - console.log('onKeydown', value, e) - } - - return ( - - ) - } - + }; + + const onKeyup = (value, { e }) => { + console.log('onKeyup', value, e); + }; + + const onKeypress = (value, { e }) => { + console.log('onKeypress', value, e); + }; + + const onKeydown = (value, { e }) => { + console.log('onKeydown', value, e); + }; + const onChange = (value, { e }) => { + console.log('onChange', value, e); + }; + + return ( + + ); +} diff --git a/src/textarea/_example/limit.tsx b/src/textarea/_example/limit.tsx index cf07bf50..22cdcfb3 100644 --- a/src/textarea/_example/limit.tsx +++ b/src/textarea/_example/limit.tsx @@ -1,11 +1,14 @@ import 'tdesign-web-components/textarea'; +import 'tdesign-web-components/space'; export default function Textarea() { - return ( - - - - ) - - } - + return ( + + + + + ); +} diff --git a/src/textarea/_example/status.tsx b/src/textarea/_example/status.tsx index 93c37c59..3f85ba9a 100644 --- a/src/textarea/_example/status.tsx +++ b/src/textarea/_example/status.tsx @@ -1,13 +1,15 @@ import 'tdesign-web-components/textarea'; +import 'tdesign-web-components/space'; export default function Textarea() { - return ( - - - - - - - - ) - } + return ( + + + + + + + + + ); +} diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index 49b78a8c..31c7234d 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -1,8 +1,8 @@ -import { classNames, Component, createRef, OmiProps, tag } from 'omi'; +import { bind, classNames, Component, createRef, tag } from 'omi'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; import { getCharacterLength, limitUnicodeMaxLength } from '../_common/js/utils/helper'; -import { getClassPrefix } from '../utils'; +import { getClassPrefix } from '../_util/classname'; import { TdTextareaProps } from './type'; export type TextareaProps = TdTextareaProps; @@ -34,20 +34,7 @@ export default class Textarea extends Component { classPrefix = getClassPrefix(); installed() { - const { - value, - disabled, - maxlength, - maxcharacter, - readonly, - autofocus, - style, - autosize, - status, - tips, - allowInputOverMax, - ...otherProps - } = this.props; + const { value, disabled, ...otherProps } = this.props; this.value = value; this.eventPropsNames = Object.keys(otherProps).filter((key) => /^on[A-Z]/.test(key)); this.eventProps = this.eventPropsNames.reduce((eventProps, key) => { @@ -73,39 +60,7 @@ export default class Textarea extends Component { const node = this.textArea.current; this.value = node.value; - - if (autosize === true) { - node.addEventListener('input', () => { - const heightObj = calcTextareaHeight(node); - const clacMinHeight = heightObj.minHeight; - const clacHeight = heightObj.height; - node.style.minHeight = clacMinHeight; - node.style.height = clacHeight; - }); - } else if (typeof autosize === 'object') { - node.addEventListener('input', () => { - const heightObj = calcTextareaHeight(node, autosize?.minRows, autosize?.maxRows); - const clacMinHeight = heightObj.minHeight; - const clacHeight = heightObj.height; - node.style.minHeight = clacMinHeight; - node.style.height = clacHeight; - }); - } - - const maxLength = maxcharacter; - if (maxLength) { - node.addEventListener('input', () => { - const text = node.value; - const length = this.countCharacters(text); - if (length > maxLength) { - if (text[text.length - 1].match('/[\u4e00-\u9fa5]/g')) { - node.value = text.slice(0, maxLength - 1); - } else { - node.value = text.slice(0, maxLength); - } - } - }); - } + this.onInput(); } countCharacters(text: string) { @@ -141,23 +96,56 @@ export default class Textarea extends Component { }); } - inputValueChangeHandle = (e: Event) => { - console.log('inputValueChangeHandle', e); + setHeight(heightObj) { + const node = this.textArea.current; + const clacMinHeight = heightObj.minHeight; + const clacHeight = heightObj.height; + node.style.minHeight = clacMinHeight; + node.style.height = clacHeight; + } + + @bind + onInput() { + const node = this.textArea.current; + const { autosize, maxcharacter } = this.props; + if (autosize === true) { + const heightObj = calcTextareaHeight(node); + this.setHeight(heightObj); + } else if (typeof autosize === 'object') { + const heightObj = calcTextareaHeight(node, autosize?.minRows, autosize?.maxRows); + this.setHeight(heightObj); + } + if (maxcharacter) { + const text = node.value; + const length = this.countCharacters(text); + if (length > maxcharacter) { + if (text[text.length - 1].match('/[\u4e00-\u9fa5]/g')) { + node.value = text.slice(0, maxcharacter - 1); + } else { + node.value = text.slice(0, maxcharacter); + } + } + } + } + + onChange(e) { const { target } = e; let val = (target as HTMLInputElement).value; - if (!this.props.allowInputOverMax && !this.textArea.current) { - val = limitUnicodeMaxLength(val, this.props.maxlength); - if (this.props.maxcharacter && this.props.maxcharacter >= 0) { - const stringInfo = getCharacterLength(val, this.props.maxcharacter); + if (!this.props?.allowInputOverMax && !this.textArea.current) { + val = limitUnicodeMaxLength(val, this.props?.maxlength); + if (this.props?.maxcharacter && this.props?.maxcharacter >= 0) { + const stringInfo = getCharacterLength(val, this.props?.maxcharacter); val = typeof stringInfo === 'object' && stringInfo.characters; } } // setValue(val, { e }); this.value = val; + + this.props?.onChange(val, { e }); this.update(); - }; + } - render(props: OmiProps) { + render(props: TextareaProps) { const { autofocus, placeholder, readonly, status, disabled, tips, maxlength, maxcharacter } = props; return ( @@ -173,9 +161,8 @@ export default class Textarea extends Component { autofocus={autofocus} maxlength={maxlength} maxcharacter={maxcharacter} - onChange={(e) => { - this.inputValueChangeHandle(e); - }} + onChange={(e) => this.onChange(e)} + onInput={this.onInput} ref={this.textArea} > {tips &&
{tips}
} diff --git a/src/textarea/type.ts b/src/textarea/type.ts index 88ff018c..dfc37d52 100644 --- a/src/textarea/type.ts +++ b/src/textarea/type.ts @@ -1,92 +1,92 @@ -import { TNode } from '../common' +import { TNode } from '../common'; export interface TdTextareaProps { /** * 超出maxlength或maxcharacter之后是否还允许输入 * @default false */ - allowInputOverMax?: boolean + allowInputOverMax?: boolean; /** * 自动聚焦，拉起键盘 * @default false */ - autofocus?: boolean + autofocus?: boolean; /** * 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度 * @default false */ - autosize?: boolean | { minRows?: number; maxRows?: number } + autosize?: boolean | { minRows?: number; maxRows?: number }; /** * 是否禁用文本框 * @default false */ - disabled?: boolean + disabled?: boolean; /** * 左侧文本 */ - label?: TNode + label?: TNode; /** * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */ - maxcharacter?: number + maxcharacter?: number; /** * 用户最多可以输入的字符个数 */ - maxlength?: number + maxlength?: number; /** * 名称，HTML 元素原生属性 * @default '' */ - name?: string + name?: string; /** * 占位符 */ - placeholder?: string + placeholder?: string; /** * 只读状态 * @default false */ - readonly?: boolean + readonly?: boolean; /** * 文本框状态 */ - status?: 'default' | 'success' | 'warning' | 'error' + status?: 'default' | 'success' | 'warning' | 'error'; /** * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */ - tips?: TNode + tips?: TNode; /** * 文本框值 */ - value?: TextareaValue + value?: TextareaValue; /** * 文本框值，非受控属性 */ - defaultValue?: TextareaValue + defaultValue?: TextareaValue; /** * 失去焦点时触发 */ - onBlur?: (value: TextareaValue, context: { e: FocusEvent }) => void + onBlur?: (value: TextareaValue, context: { e: FocusEvent }) => void; /** - * 输入内容变化时触发: TODO: FormEvent? + * 输入内容变化时触发: */ - onChange?: (value: TextareaValue, context?: { e?: Event }) => void + onChange?: (value: TextareaValue, context?: { e?: Event }) => void; /** * 获得焦点时触发 */ - onFocus?: (value: TextareaValue, context: { e: FocusEvent }) => void + onFocus?: (value: TextareaValue, context: { e: FocusEvent }) => void; /** * 键盘按下时触发 */ - onKeydown?: (value: TextareaValue, context: { e: KeyboardEvent }) => void + onKeydown?: (value: TextareaValue, context: { e: KeyboardEvent }) => void; /** * 按下字符键时触发（keydown -> keypress -> keyup） */ - onKeypress?: (value: TextareaValue, context: { e: KeyboardEvent }) => void + onKeypress?: (value: TextareaValue, context: { e: KeyboardEvent }) => void; /** * 释放键盘时触发 */ - onKeyup?: (value: TextareaValue, context: { e: KeyboardEvent }) => void + onKeyup?: (value: TextareaValue, context: { e: KeyboardEvent }) => void; } -export type TextareaValue = string +export type TextareaValue = string;