✨(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>