docs: add demo

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

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>