feat: add named slot for textarea (#832)

* feat: add named slot for textarea * feat: add forceExpand props --------- Co-authored-by: xiebingshan <[email protected]>
didi · Mar 6, 2024 · 821c3ff · 821c3ff
1 parent c740486
commit 821c3ff
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 4 deletions.
diff --git a/document/components/docs/en-US/textarea.md b/document/components/docs/en-US/textarea.md
@@ -48,6 +48,23 @@ Multi-line input box components. You can use the `v-model` directive to create t
   If `indicator` is `true`, the config equals `{remain: true, negative: true}`.
 
   If `indicator` is an object, you can use `remain` and `negative` to control whether show the remaining count(if `remain` is `false` means show the textarea value length) and whether allow remaining number is negative.
+
+  Starting from version 1.12.53, named scoped slot `indicator` is supported for custom count indicators. It provides the remaining characters `remain` and the current input count `count`:
+
+  ```html
+  <cube-textarea
+    v-model="text"
+    placeholder="请您至少输入8个字（必填）"
+    :maxlength="300"
+    :auto-expand="true"
+  >
+    <span slot="indicator" slot-scope="{ remain }" class="cube-textarea-indicator">{{remain}}/300</span>
+    <!-- 或者 vue2.6以上 -->
+    <!-- <template #indicator="childValue">
+      <span class="cube-textarea-indicator">{{childValue.remain}}/300</span>
+    </template> -->
+  </cube-textarea>
+  ```
 
 - Multiple configurations
 
@@ -90,6 +107,7 @@ Multi-line input box components. You can use the `v-model` directive to create t
 | autofocus | autofocus status | Boolean | true/false | false |
 | indicator<sup>1.10.0</sup> | indicator config | Boolean/Object | true/false/{} | true |
 | autoExpand<sup>1.12.0</sup> | If `autoExpand` is true and have initial value, the textarea will be auto expanded | Boolean | true/false | false |
+| forceExpand<sup>1.12.53</sup> | If `forceExpand` is true, the textarea will remain expanded at all times. | Boolean | true/false | false |
 
 - indicator sub configuration
 

diff --git a/document/components/docs/zh-CN/textarea.md b/document/components/docs/zh-CN/textarea.md
@@ -43,6 +43,23 @@
   ```
 
   如果 `indicator` 的值为 `false`，则不显示计数标识，如果为 `true`，则等同于 `{remain: true, negative: true}`，而如果是对象，则可通过 `remain` 和 `negative` 分别控制是否显示剩余字数（如果为 `false` 则显示输入字数）和是否允许负值。
+
+  从1.12.53开始也支持具名作用域插槽 `indicator` 自定义计数标识，提供了剩余可输入字数 `remain`，和当前已输入字数 `count`：
+
+  ```html
+  <cube-textarea
+    v-model="text"
+    placeholder="请您至少输入8个字（必填）"
+    :maxlength="300"
+    :auto-expand="true"
+  >
+    <span slot="indicator" slot-scope="{ remain }" class="cube-textarea-indicator">{{remain}}/300</span>
+    <!-- 或者 vue2.6以上 -->
+    <!-- <template #indicator="childValue">
+      <span class="cube-textarea-indicator">{{childValue.remain}}/300</span>
+    </template> -->
+  </cube-textarea>
+  ```
 
 - 多项配置
 
@@ -85,6 +102,7 @@
 | autofocus | 自动对焦 | Boolean | true/false | false |
 | indicator<sup>1.10.0</sup> | 计数标识配置 | Boolean/Object | true/false/{} | true |
 | autoExpand<sup>1.12.0</sup> | 如果为 true 且默认有内容的话，会默认展开 | Boolean | true/false | false |
+| forceExpand<sup>1.12.53</sup> | 如果为 true , 会始终保持展开 | Boolean | true/false | false |
 
 - indicator 子配置项
 
@@ -95,6 +113,12 @@
   | remain | 是否控制显示剩余字数，如果为 `false` 则代表显示输入字数 | Boolean | true/false | true |
   | negative | 当 `remain` 为 true 时有效，是否允许出现负值 | Boolean | true/false | true |
 
+### 插槽
+
+  | 名称 | 说明 |
+  | - | - |
+  | indicator<sup>1.12.53</sup>  | 自定义右下角计数标识 |
+
 ### 事件
 
 | 事件名 | 说明 | 参数 |

diff --git a/example/pages/textarea.vue b/example/pages/textarea.vue
@@ -30,6 +30,17 @@
           </div>
         </div>
       </div>
+      <div class="title">named slot indicator & forceExpand: true</div>
+      <div class="textarea-wrapper">
+        <cube-textarea
+          v-model="text"
+          :force-expand="true"
+          :maxlength="+maxlength || 60"
+          :indicator="false"
+          :width="width || '300px'">
+          <span slot="indicator" slot-scope="{ remain }" class="cube-textarea-indicator">{{remain}}/{{maxlength || 60}}</span>
+        </cube-textarea>
+      </div>
     </div>
   </cube-page>
 </template>

diff --git a/src/components/textarea/textarea.vue b/src/components/textarea/textarea.vue
@@ -13,7 +13,9 @@
       @change="changeHander"
     >
     </textarea>
-    <span v-if="indicator" v-show="expanded" class="cube-textarea-indicator">{{indicatorConf.remain ? remain : count}}</span>
+    <slot name="indicator" :remain="remain" :count="count">
+      <span v-if="indicator" v-show="expanded" class="cube-textarea-indicator">{{indicatorConf.remain ? remain : count}}</span>
+    </slot>
   </div>
 </template>
 
@@ -33,7 +35,7 @@
     data() {
       return {
         textareaValue: this.value,
-        expanded: this.autoExpand ? !!this.value : false,
+        expanded: this.forceExpand ? true : (this.autoExpand ? !!this.value : false),
         isFocus: false
       }
     },
@@ -70,6 +72,10 @@
       autoExpand: {
         type: Boolean,
         default: false
+      },
+      forceExpand: {
+        type: Boolean,
+        default: false
       }
     },
     computed: {
@@ -97,7 +103,7 @@
       },
       textareaValue(newValue) {
         this.$emit(EVENT_INPUT, newValue)
-        if (!this.isFocus && this.expanded) {
+        if (!this.forceExpand && !this.isFocus && this.expanded) {
           this.expanded = false
         }
       }
@@ -110,7 +116,7 @@
       },
       handleBlur(e) {
         this.$emit('blur', e)
-        if (this.textareaValue.length === 0) {
+        if (!this.forceExpand && this.textareaValue.length === 0) {
           this.expanded = false
         }
         this.isFocus = false