From aa7a40bf9d7aaa09183754aa34aa6fa4f995109d Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Wed, 15 Mar 2023 11:27:33 +0800
Subject: [PATCH] docs: add demo

---
 docs/en-US/component/input.md           |  8 ++++++++
 docs/examples/input/count-graphemes.vue | 27 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 docs/examples/input/count-graphemes.vue

diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md
index 9e169cc341..866c1e7f12 100644
--- a/docs/en-US/component/input.md
+++ b/docs/en-US/component/input.md
@@ -115,6 +115,14 @@ input/length-limiting
 
 :::
 
+## Count graphemes
+
+:::demo Set `count-graphemes` to `true` to count graphemes of input value. If it's set, native `maxlength` and `minlength` won't be used.
+
+input/count-graphemes
+
+:::
+
 ## API
 
 ### Attributes
diff --git a/docs/examples/input/count-graphemes.vue b/docs/examples/input/count-graphemes.vue
new file mode 100644
index 0000000000..484e23378b
--- /dev/null
+++ b/docs/examples/input/count-graphemes.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-input
+    v-model="text"
+    maxlength="10"
+    placeholder="Please input"
+    show-word-limit
+    :count-graphemes="calc"
+    type="text"
+  />
+  <div style="margin: 20px 0" />
+  <el-input
+    v-model="textarea"
+    maxlength="20"
+    placeholder="Please input"
+    show-word-limit
+    type="textarea"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const text = ref('😀😁')
+const textarea = ref('😀😁')
+const calc = (value: string) => {
+  return Array.from(value).length
+}
+</script>