From 416f09e4f9cd8df1673996db5ff13c05bcc345f0 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 17 Jun 2022 22:00:56 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(textarea):=20=E6=B7=BB=E5=8A=A0=20sho?=
 =?UTF-8?q?w-count=20=E5=B1=9E=E6=80=A7,=20=E6=98=BE=E7=A4=BA=E5=AD=97?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/carousel/index.vue          |  4 +--
 .../src/component/textarea/index.less         |  6 ++++
 .../src/component/textarea/index.vue          | 16 ++++++++++
 .../src/document/zh-CN/components/textarea.md | 32 +++++++++++++++++++
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/package/component/src/component/carousel/index.vue b/package/component/src/component/carousel/index.vue
index aae9c7d3..c0701072 100644
--- a/package/component/src/component/carousel/index.vue
+++ b/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>
diff --git a/package/component/src/component/textarea/index.less b/package/component/src/component/textarea/index.less
index 946c0e5e..63714fb4 100644
--- a/package/component/src/component/textarea/index.less
+++ b/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;
+}
\ No newline at end of file
diff --git a/package/component/src/component/textarea/index.vue b/package/component/src/component/textarea/index.vue
index d95ca091..28930b48 100644
--- a/package/component/src/component/textarea/index.vue
+++ b/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>
diff --git a/package/document/src/document/zh-CN/components/textarea.md b/package/document/src/document/zh-CN/components/textarea.md
index a74d7007..8e9afabe 100644
--- a/package/document/src/document/zh-CN/components/textarea.md
+++ b/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     | 值            | --             |