feat(textarea-item): 新增中文输入处理

.gitignore

@@ -24,3 +24,4 @@ coverage/
 *.ntvs*
 *.njsproj
 *.sln
+.history

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 <sup class="version-after">2.5.13+</sup>  |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 <sup class="version-after">2.6.1+</sup> | 
+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

components/textarea-item/README.md

@@ -34,6 +34,8 @@ Vue.component(TextareaItem.name, TextareaItem)
 | rows                                              | 开始显示的行数                                   | String/Number | `'3'`   | -              |
 | error                                             | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String        | -       | -              |
 | formation <sup class="version-after">2.5.13+</sup> |表单文本格式化回调方法                         |Function(name, curValue, curPos): {value: curValue, range: curPos}|-|传入参数`name`为表单名称，`curValue`为表单值，`curPos`为表单光标当前所在位置<br/>返回参数`value`格式化值, `range`表单光标格式化后所在位置|
+| compositionable <sup class="version-after">2.6.1+</sup> | 是否开启文本输入处理，开启后输入确认才会触发 `change` 事件| Boolean       | `false` | -              |
+
 
 #### TextareaItem Slots
 
@@ -68,3 +70,9 @@ Vue.component(TextareaItem.name, TextareaItem)
 
 ##### @keydown(name, event)
 文本域按键释放事件
+
+##### @compositionstart(name, event)
+文本域开始输入汉字事件
+
+##### @compositionend(name, event)
+文本域确认/取消输入汉字事件

components/textarea-item/index.vue

@@ -22,6 +22,8 @@
       @blur="$_onBlur"
       @keyup="$_onKeyup"
       @keydown="$_onKeydown"
+      @compositionstart="$_onCompositionstart"
+      @compositionend="$_onCompositionend"
     ></textarea>
     <slot name="footer"></slot>
     <template slot="right">
@@ -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'

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结束输入')
+  })
 })