diff --git a/.gitignore b/.gitignore
index 9f0c75558..caa28f327 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ coverage/
*.ntvs*
*.njsproj
*.sln
+.history
\ No newline at end of file
diff --git a/components/textarea-item/README.en-US.md b/components/textarea-item/README.en-US.md
index cc61ae5bd..630ee95ee 100644
--- a/components/textarea-item/README.en-US.md
+++ b/components/textarea-item/README.en-US.md
@@ -34,6 +34,8 @@ Vue.component(TextareaItem.name, TextareaItem)
| rows | rows | String/Number | `'3'` | - |
| error | error message | String | - | - |
|formation 2.5.13+ |input text formatting callback function|Function(name, curValue, curPos): {value: curValue, range: curPos}|-|passing parameter `name` is the name of input, `curValue` is input value, `curPos` is the current position of input cursor, and returned `value` is formatted value. `range` is the position of input cursor after formatting|
+| compositionable 2.6.1+ |
+Whether to enable text input processing, the `change` event will be triggered only after the input confirmation is enabled| Boolean | `false` | - |
#### TextareaItem Slots
@@ -68,3 +70,9 @@ key press
##### @keydown(name, event)
key release
+
+##### @compositionstart(name, event)
+Chinese input start
+
+##### @compositionend(name, event)
+Chinese input confirm or cancel
\ No newline at end of file
diff --git a/components/textarea-item/README.md b/components/textarea-item/README.md
index f78e838ae..9efdb66a6 100644
--- a/components/textarea-item/README.md
+++ b/components/textarea-item/README.md
@@ -34,6 +34,8 @@ Vue.component(TextareaItem.name, TextareaItem)
| rows | 开始显示的行数 | String/Number | `'3'` | - |
| error | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String | - | - |
| formation 2.5.13+ |表单文本格式化回调方法 |Function(name, curValue, curPos): {value: curValue, range: curPos}|-|传入参数`name`为表单名称,`curValue`为表单值,`curPos`为表单光标当前所在位置
返回参数`value`格式化值, `range`表单光标格式化后所在位置|
+| compositionable 2.6.1+ | 是否开启文本输入处理,开启后输入确认才会触发 `change` 事件| Boolean | `false` | - |
+
#### TextareaItem Slots
@@ -68,3 +70,9 @@ Vue.component(TextareaItem.name, TextareaItem)
##### @keydown(name, event)
文本域按键释放事件
+
+##### @compositionstart(name, event)
+文本域开始输入汉字事件
+
+##### @compositionend(name, event)
+文本域确认/取消输入汉字事件
\ No newline at end of file
diff --git a/components/textarea-item/index.vue b/components/textarea-item/index.vue
index ff04f57d5..a24034356 100644
--- a/components/textarea-item/index.vue
+++ b/components/textarea-item/index.vue
@@ -22,6 +22,8 @@
@blur="$_onBlur"
@keyup="$_onKeyup"
@keydown="$_onKeydown"
+ @compositionstart="$_onCompositionstart"
+ @compositionend="$_onCompositionend"
>
@@ -112,6 +114,10 @@ export default {
type: Function,
default: noop,
},
+ compositionable: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
@@ -152,6 +158,10 @@ export default {
},
methods: {
$_onInput(event) {
+ if (event.target.isNeedPrevent) {
+ return
+ }
+
const formateValue = this.$_formateValue(event.target.value, getCursorsPosition(event.target))
this.inputValue = formateValue.value
@@ -195,6 +205,21 @@ export default {
this.$emit('blur')
}, 100)
},
+
+ $_onCompositionstart(event) {
+ if (this.compositionable) {
+ event.target.isNeedPrevent = true
+ }
+ this.$emit('compositionstart', event)
+ },
+
+ $_onCompositionend(event) {
+ if (this.compositionable) {
+ event.target.isNeedPrevent = false
+ }
+ this.$emit('compositionend', event)
+ },
+
$_calcTextareaHeight(textarea) {
// Triggers the textarea to repaint
textarea.style.height = 'auto'
diff --git a/components/textarea-item/test/index.spec.js b/components/textarea-item/test/index.spec.js
index 3e824808a..1c42c7e41 100644
--- a/components/textarea-item/test/index.spec.js
+++ b/components/textarea-item/test/index.spec.js
@@ -159,4 +159,25 @@ describe('TextareaItem - Operation', () => {
clearBtn.trigger('click')
expect(wrapper.vm.inputValue).toBe('')
})
+
+ test('compositionable', () => {
+ wrapper = mount(TextareaItem, {
+ propsData: {
+ maxHeight: 300,
+ maxLength: 10,
+ autosize: true,
+ clearable: true,
+ value: 'abc',
+ compositionable: true,
+ },
+ })
+
+ const textarea = wrapper.vm.$refs.textarea
+
+ expect(wrapper.vm.getValue()).toBe('abc')
+ triggerEvent(textarea, 'compositionstart', 0, 0, '')
+ expect(wrapper.vm.getValue()).toBe('abc')
+ triggerEvent(textarea, 'compositionend', 0, 0, '结束输入')
+ expect(wrapper.vm.getValue()).toBe('abc结束输入')
+ })
})