✨(textarea): 添加 show-count 属性, 显示字数

package/component/src/component/carousel/index.vue

@@ -75,7 +75,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
 };
 
 watch(slotsChange, () => {
-  alert("111111111111")
+  alert("111111111111");
   childrens.value = [];
   setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
 });
@@ -139,7 +139,7 @@ watch(
     :lay-anim="anim"
     :lay-indicator="indicator"
     :lay-arrow="arrow"
-    :style="{ 'width': width, 'height': height }"
+    :style="{ width: width, height: height }"
   >
     <div carousel-item>
       <slot></slot>

package/component/src/component/textarea/index.less

@@ -30,3 +30,9 @@
 .layui-textarea::-webkit-input-placeholder {
   line-height: 1.3;
 }
+.layui-texterea-show-count {
+  text-align: right;
+  color: inherit;
+  white-space: nowrap;
+  pointer-events: none;
+}

package/component/src/component/textarea/index.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { computed, useAttrs } from "vue";
 import "./index.less";
 
 export interface LayTextareaProps {
@@ -12,12 +13,15 @@ export interface LayTextareaProps {
   modelValue?: string;
   placeholder?: string;
   disabled?: boolean;
+  showCount?: boolean;
 }
 
 const props = defineProps<LayTextareaProps>();
 
 const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
 
+const attrs = useAttrs();
+
 const onInput = function (event: InputEvent) {
   const inputElement = event.target as HTMLInputElement;
   emit("update:modelValue", inputElement.value);
@@ -31,11 +35,20 @@ const onFocus = function (event: FocusEvent) {
 const onBlur = function () {
   emit("blur");
 };
+
+const wordCount = computed(() => {
+  let count = String(props.modelValue?.length ?? 0);
+  if (attrs.maxlength) {
+    count += "/" + attrs.maxlength;
+  }
+  return count;
+});
 </script>
 
 <template>
   <textarea
     :value="modelValue"
+    v-bind="$attrs"
     :placeholder="placeholder"
     :name="name"
     :disabled="disabled"
@@ -45,4 +58,7 @@ const onBlur = function () {
     @focus="onFocus"
     @blur="onBlur"
   ></textarea>
+  <div v-if="showCount" class="layui-texterea-show-count">
+    {{ wordCount }}
+  </div>
 </template>

package/document/src/document/zh-CN/components/textarea.md

@@ -91,6 +91,37 @@ export default {
 
 :::
 
+::: title 显示字数
+:::
+
+::: demo
+
+<template>
+  <lay-textarea placeholder="显示字数" v-model="data4" show-count></lay-textarea>
+  <br>
+  <lay-textarea placeholder="最大输入长度" v-model="data5" show-count maxlength="10"></lay-textarea>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const data4 = ref("");
+    const data5 = ref("");
+    return {
+      data4,
+      data5
+    }
+  }
+}
+</script>
+
+:::
+
+:::
+
 ::: title Textarea 属性
 :::
 
@@ -100,6 +131,7 @@ export default {
 | ----------- | ------------- | -------------- |
 | name        | 原始属性 name | --             |
 | placeholder | 提示信息      | --             |
+| show-count | 显示字数       | `true` `false`  |
 | disabled    | 禁用          | `true` `false` |
 | v-model     | 值            | --             |