diff --git a/src/textarea/README.en-US.md b/src/textarea/README.en-US.md index cc2ac38b6..a62b4edac 100644 --- a/src/textarea/README.en-US.md +++ b/src/textarea/README.en-US.md @@ -2,6 +2,7 @@ ## API + ### Textarea Props name | type | default | description | required @@ -9,6 +10,7 @@ name | type | default | description | required style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N adjust-position | Boolean | true | \- | N +allow-input-over-max | Boolean | false | \- | N autofocus | Boolean | false | \- | N autosize | Boolean / Object | false | Typescript：`boolean \| { maxHeight?: number, minHeight?: number }` | N bordered | Boolean | false | \- | N @@ -26,7 +28,9 @@ label | String / Slot | - | [see more ts definition](https://github.com/Tencent/ maxcharacter | Number | - | \- | N maxlength | Number | -1 | \- | N placeholder | String | undefined | \- | N +placeholder-class | String | textarea-placeholder | \- | N placeholder-style | String | - | \- | N +readonly | Boolean | undefined | \- | N selection-end | Number | -1 | \- | N selection-start | Number | -1 | \- | N show-confirm-bar | Boolean | true | \- | N diff --git a/src/textarea/README.md b/src/textarea/README.md index 04c2c7f9a..289d5091a 100644 --- a/src/textarea/README.md +++ b/src/textarea/README.md @@ -65,6 +65,7 @@ isComponent: true ## API + ### Textarea Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -72,6 +73,7 @@ isComponent: true style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N +allow-input-over-max | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N autofocus | Boolean | false | 自动聚焦，拉起键盘 | N autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 }。TS 类型：`boolean \| { maxHeight?: number, minHeight?: number }` | N bordered | Boolean | false | 是否显示外边框 | N @@ -89,7 +91,9 @@ label | String / Slot | - | 左侧文本。[通用类型定义](https://github.c maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N maxlength | Number | -1 | 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 | N placeholder | String | undefined | 占位符 | N +placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight | N placeholder-style | String | - | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N +readonly | Boolean | undefined | 只读状态 | N selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N @@ -114,7 +118,7 @@ line-change | `(value: TextareaValue)` | 行高发生变化时触发 t-class | 根节点样式类 t-class-indicator | 计数器样式类 t-class-label | 左侧文本样式类 -t-class-textarea | 占位符样式类 +t-class-textarea | 多行文本框样式类 ### CSS Variables diff --git a/src/textarea/__test__/index.test.js b/src/textarea/__test__/index.test.js index 56daa3415..a5a20d0f3 100644 --- a/src/textarea/__test__/index.test.js +++ b/src/textarea/__test__/index.test.js @@ -99,6 +99,54 @@ describe('textarea', () => { await simulate.sleep(0); expect(component.instance.data.count).toBe(10); }); + + it(': allowInputOverMax', async () => { + const handleChange = jest.fn(); + const id = simulate.load({ + template: ` + `, + data: { + maxcharacter: 10, + value: 'tdesign', + }, + methods: { + handleChange, + }, + usingComponents: { + 't-textarea': textarea, + }, + }); + const comp = simulate.render(id); + comp.attach(document.createElement('parent-wrapper')); + const component = comp.querySelector('.base'); + expect(component.instance.data.count).toBe(7); + + const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-inner'); + + $textarea.dispatchEvent('input', { detail: { value: 'tdesign123' } }); + await simulate.sleep(0); + expect(handleChange).toHaveBeenCalledTimes(1); + expect(component.instance.data.count).toBe(10); + + $textarea.dispatchEvent('input', { detail: { value: 'textarea用于多行文本信息输入' } }); + await simulate.sleep(0); + expect(handleChange).toHaveBeenCalledTimes(2); + expect(component.instance.data.count).toBe(28); + expect(handleChange.mock.calls[1][0].detail).toStrictEqual({ + value: 'textarea用于多行文本信息输入', + cursor: undefined, + }); + + $textarea.dispatchEvent('input', { detail: { value: 'textarea用于567' } }); + await simulate.sleep(0); + expect(component.instance.data.count).toBe(15); + }); }); describe('slots', () => { diff --git a/src/textarea/props.ts b/src/textarea/props.ts index 8ae321e34..43b3d4e75 100644 --- a/src/textarea/props.ts +++ b/src/textarea/props.ts @@ -11,6 +11,11 @@ const props: TdTextareaProps = { type: Boolean, value: true, }, + /** 超出maxlength或maxcharacter之后是否还允许输入 */ + allowInputOverMax: { + type: Boolean, + value: false, + }, /** 自动聚焦，拉起键盘 */ autofocus: { type: Boolean, @@ -94,11 +99,21 @@ const props: TdTextareaProps = { type: String, value: undefined, }, + /** 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight */ + placeholderClass: { + type: String, + value: 'textarea-placeholder', + }, /** 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight */ placeholderStyle: { type: String, value: '', }, + /** 只读状态 */ + readonly: { + type: null, + value: undefined, + }, /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */ selectionEnd: { type: Number, diff --git a/src/textarea/textarea.ts b/src/textarea/textarea.ts index 28e76afeb..cc21d15cc 100644 --- a/src/textarea/textarea.ts +++ b/src/textarea/textarea.ts @@ -61,15 +61,20 @@ export default class Textarea extends SuperComponent { }, calculateValue(value, maxcharacter, maxlength) { + const { allowInputOverMax } = this.properties; if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) { - const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter); + const { length, characters } = getCharacterLength( + 'maxcharacter', + value, + allowInputOverMax ? Infinity : maxcharacter, + ); return { value: characters, count: length, }; } if (maxlength > 0 && !Number.isNaN(maxlength)) { - const { length, characters } = getCharacterLength('maxlength', value, maxlength); + const { length, characters } = getCharacterLength('maxlength', value, allowInputOverMax ? Infinity : maxlength); return { value: characters, count: length, diff --git a/src/textarea/textarea.wxml b/src/textarea/textarea.wxml index 5d2515c93..2c8f37cfd 100644 --- a/src/textarea/textarea.wxml +++ b/src/textarea/textarea.wxml @@ -13,8 +13,8 @@