From 1a3decee375a97bd0ddfcd4208c6e2acaeefd518 Mon Sep 17 00:00:00 2001
From: zhuguogen <zhuguogen@didiglobal.com>
Date: Thu, 9 Dec 2021 21:52:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(textarea-item):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=B1=89=E5=AD=97=E8=BE=93=E5=85=A5=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                  |  1 +
 components/textarea-item/README.en-US.md    |  8 +++++++
 components/textarea-item/README.md          |  8 +++++++
 components/textarea-item/index.vue          | 25 +++++++++++++++++++++
 components/textarea-item/test/index.spec.js | 21 +++++++++++++++++
 5 files changed, 63 insertions(+)

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 <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
\ 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 <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)
+文本域确认/取消输入汉字事件
\ 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"
     ></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'
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结束输入')
+  })
 })