From e46e07adefd6e1f4d52aeb0d83c12d9fbdc51a00 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 17 Jan 2024 22:41:26 +0800
Subject: [PATCH] chore(input): split demo (#2850)

---
 .../src/dentry/pages/input/align.vue          |  11 +
 .../src/dentry/pages/input/basic.vue          |   7 +
 .../src/dentry/pages/input/border.vue         |   9 +
 .../src/dentry/pages/input/clear.vue          |  17 ++
 .../src/dentry/pages/input/count.vue          |   7 +
 .../src/dentry/pages/input/event.vue          |  13 +
 .../src/dentry/pages/input/form.vue           |  11 +
 .../src/dentry/pages/input/format.vue         |  10 +
 .../src/dentry/pages/input/index.vue          | 187 +++++----------
 .../src/dentry/pages/input/slot.vue           |  15 ++
 .../src/dentry/pages/input/status.vue         |   9 +
 .../src/dentry/pages/input/type.vue           |  13 +
 src/packages/__VUE/input/demo.vue             | 211 ----------------
 src/packages/__VUE/input/demo/align.vue       |  11 +
 src/packages/__VUE/input/demo/basic.vue       |   7 +
 src/packages/__VUE/input/demo/border.vue      |   9 +
 src/packages/__VUE/input/demo/clear.vue       |  17 ++
 src/packages/__VUE/input/demo/count.vue       |   7 +
 src/packages/__VUE/input/demo/event.vue       |  13 +
 src/packages/__VUE/input/demo/form.vue        |  11 +
 src/packages/__VUE/input/demo/format.vue      |  10 +
 src/packages/__VUE/input/demo/index.vue       |  80 +++++++
 src/packages/__VUE/input/demo/slot.vue        |  15 ++
 src/packages/__VUE/input/demo/status.vue      |   9 +
 src/packages/__VUE/input/demo/type.vue        |  13 +
 src/packages/__VUE/input/doc.en-US.md         | 206 ++--------------
 src/packages/__VUE/input/doc.md               | 217 ++---------------
 src/packages/__VUE/input/doc.taro.md          | 226 ++----------------
 28 files changed, 446 insertions(+), 925 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/align.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/border.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/clear.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/count.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/event.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/form.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/format.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/slot.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/status.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/input/type.vue
 delete mode 100644 src/packages/__VUE/input/demo.vue
 create mode 100644 src/packages/__VUE/input/demo/align.vue
 create mode 100644 src/packages/__VUE/input/demo/basic.vue
 create mode 100644 src/packages/__VUE/input/demo/border.vue
 create mode 100644 src/packages/__VUE/input/demo/clear.vue
 create mode 100644 src/packages/__VUE/input/demo/count.vue
 create mode 100644 src/packages/__VUE/input/demo/event.vue
 create mode 100644 src/packages/__VUE/input/demo/form.vue
 create mode 100644 src/packages/__VUE/input/demo/format.vue
 create mode 100644 src/packages/__VUE/input/demo/index.vue
 create mode 100644 src/packages/__VUE/input/demo/slot.vue
 create mode 100644 src/packages/__VUE/input/demo/status.vue
 create mode 100644 src/packages/__VUE/input/demo/type.vue

diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/align.vue b/packages/nutui-taro-demo/src/dentry/pages/input/align.vue
new file mode 100644
index 0000000000..64b3e94b40
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/align.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-input v-model="val1" input-align="left" />
+  <nut-input v-model="val2" input-align="center" />
+  <nut-input v-model="val3" input-align="right" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('Left');
+const val2 = ref('Center');
+const val3 = ref('Right');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/input/basic.vue
new file mode 100644
index 0000000000..23bb98f67b
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/basic.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-input v-model="val" placeholder="Placeholder" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/border.vue b/packages/nutui-taro-demo/src/dentry/pages/input/border.vue
new file mode 100644
index 0000000000..e200ac25f9
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/border.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-input v-model="val1" :border="false" />
+  <nut-input v-model="val2" :border="false" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('12345');
+const val2 = ref('12345');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/clear.vue b/packages/nutui-taro-demo/src/dentry/pages/input/clear.vue
new file mode 100644
index 0000000000..d763ecfce1
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/clear.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-input v-model="val1" placeholder="Clearable" clearable />
+  <nut-input v-model="val2" placeholder="Clear Slot" clearable show-clear-icon>
+    <template #clear>
+      <Close size="12" @click="onClick"></Close>
+    </template>
+  </nut-input>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Close } from '@nutui/icons-vue-taro';
+const val1 = ref('');
+const val2 = ref('');
+const onClick = () => {
+  val2.value = '';
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/count.vue b/packages/nutui-taro-demo/src/dentry/pages/input/count.vue
new file mode 100644
index 0000000000..0415602cf3
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/count.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-input v-model="val" show-word-limit :max-length="50" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('12345');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/event.vue b/packages/nutui-taro-demo/src/dentry/pages/input/event.vue
new file mode 100644
index 0000000000..1a7cf22548
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/event.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-input v-model="val" clearable placeholder="Event" @clear="clear" @click-input="click" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+const clear = () => {
+  console.log('clear');
+};
+const click = () => {
+  console.log('click-input');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/form.vue b/packages/nutui-taro-demo/src/dentry/pages/input/form.vue
new file mode 100644
index 0000000000..4161e23e96
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/form.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-form>
+    <nut-form-item label="Label" label-align="center">
+      <nut-input v-model="val" />
+    </nut-form-item>
+  </nut-form>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/format.vue b/packages/nutui-taro-demo/src/dentry/pages/input/format.vue
new file mode 100644
index 0000000000..bab0b02232
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/format.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-input v-model="val1" placeholder="Format on Change" :formatter="formatter" format-trigger="onChange" />
+  <nut-input v-model="val2" placeholder="Format on Blur" :formatter="formatter" format-trigger="onBlur" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('');
+const val2 = ref('');
+const formatter = (value) => value.replace(/\d/g, '');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/index.vue b/packages/nutui-taro-demo/src/dentry/pages/input/index.vue
index 1418921492..acb8745621 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/input/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/index.vue
@@ -1,139 +1,80 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-input v-model="state.val1" placeholder="文本" />
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>自定义类型</h2>
-    <nut-input v-model="state.text" placeholder="文本" />
-    <nut-input v-model="state.password" type="password" placeholder="密码" />
-    <nut-input v-model="state.digit" type="digit" placeholder="数字（支持小数）" />
-    <nut-input v-model="state.number" type="number" placeholder="整数" />
+    <h2>{{ t('type') }}</h2>
+    <Type />
 
-    <h2>禁用和只读</h2>
-    <nut-input v-model="state.readonly" readonly placeholder="只读" />
-    <nut-input v-model="state.disabled" disabled placeholder="禁用" />
+    <h2>{{ t('status') }}</h2>
+    <Status />
 
-    <h2>显示清除图标</h2>
-    <nut-input v-model="state.clear" clearable clear-size="14" placeholder="显示清除图标" />
-    <nut-input
-      v-model="state.clear2"
-      placeholder="自定义清除图标"
-      clearable
-      clear-size="14"
-      show-word-limit
-      max-length="50"
-      :show-clear-icon="true"
-    >
-      <template #clear>
-        <Close width="12" height="12" size="12" @click="clearValue"></Close>
-      </template>
-    </nut-input>
-    <h2>配合表单使用</h2>
-    <nut-form :model-value="state">
-      <nut-form-item label-align="center" label="文本">
-        <nut-input v-model="state.val2" placeholder="请输入文本" :border="false" />
-      </nut-form-item>
-    </nut-form>
+    <h2>{{ t('clear') }}</h2>
+    <Clear />
 
-    <h2>格式化输入内容</h2>
-    <nut-input v-model="state.format1" :formatter="formatter" placeholder="在输入时执行格式化" />
-    <nut-input
-      v-model="state.format2"
-      :formatter="formatter"
-      format-trigger="onBlur"
-      placeholder="在失焦时执行格式化"
-    />
+    <h2>{{ t('form') }}</h2>
+    <FormDemo />
 
-    <h2>显示字数统计</h2>
-    <nut-input
-      v-model="state.textarea"
-      type="text"
-      show-word-limit
-      rows="2"
-      max-length="50"
-      placeholder="留言"
-      :adjust-position="state.adjustPosition"
-    />
+    <h2>{{ t('format') }}</h2>
+    <Format />
 
-    <h2>无边框</h2>
-    <nut-input v-model="state.disabled" :border="false" placeholder="无边框" />
-    <nut-input v-model="state.showIcon" :border="false" placeholder="无边框" />
+    <h2>{{ t('count') }}</h2>
+    <Count />
 
-    <h2>事件演示</h2>
-    <nut-input
-      v-model="state.event"
-      placeholder="事件演示"
-      clearable
-      :adjust-position="state.adjustPosition"
-      @clear="clear"
-      @click-input="clickInput"
-    />
-    <nut-toast v-model:visible="state.show" :msg="state.msg" type="text" />
-    <h2>插槽演示</h2>
-    <nut-input v-model="state.slotsValue" placeholder="插槽演示" clearable :adjust-position="state.adjustPosition">
-      <template #left> <Ask></Ask> </template>
-      <template #right>
-        <nut-button type="primary" size="small">获取验证码</nut-button>
-      </template>
-    </nut-input>
+    <h2>{{ t('border') }}</h2>
+    <Border />
+
+    <h2>{{ t('align') }}</h2>
+    <Align />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
+
+    <h2>{{ t('slot') }}</h2>
+    <SlotDemo />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { Close, Ask } from '@nutui/icons-vue-taro';
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Type from './type.vue';
+import Status from './status.vue';
+import Clear from './clear.vue';
+import FormDemo from './form.vue';
+import Format from './format.vue';
+import Count from './count.vue';
+import Border from './border.vue';
+import Align from './align.vue';
+import Event from './event.vue';
+import SlotDemo from './slot.vue';
 
-const state = reactive({
-  val1: '',
-  val2: '',
-  text: '',
-  password: '',
-  number: '',
-  digit: '',
-  tel: '',
-  readonly: '',
-  disabled: '禁用',
-  showIcon: '',
-  required: '',
-  error1: '',
-  error2: '',
-  buttonVal: '',
-  format1: '',
-  format2: '',
-  textarea: '',
-  align1: '',
-  align2: '',
-  event: '',
-  slotsValue: '',
-  clear: '',
-  clear2: '',
-  adjustPosition: false,
-  show: false,
-  msg: ''
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    type: '自定义类型',
+    status: '禁用和只读',
+    clear: '显示清除图标',
+    form: '配合表单使用',
+    format: '格式化输入内容',
+    count: '显示字数统计',
+    border: '无边框',
+    align: '对齐方式',
+    event: '事件演示',
+    slot: '插槽演示'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    type: 'Custom Type',
+    status: 'Disabled & Readonly',
+    clear: 'Show Clear Icon',
+    form: 'Use Form',
+    format: 'Format Value',
+    count: 'Show Word Limit',
+    border: 'No Border',
+    align: 'Input Align',
+    event: 'Event',
+    slot: 'Slot'
+  }
 });
-
-const clear = (value: string | number, event: Event) => {
-  console.log('clear:', value, event);
-  showToast('clear');
-};
-const showToast = (msg: string) => {
-  state.show = true;
-  state.msg = msg;
-};
-const clickInput = (value: string | number) => {
-  console.log('clickInput:', value);
-  showToast('clickInput');
-};
-const formatter = (value: string) => value.replace(/\d/g, '');
-const clearValue = () => {
-  state.clear2 = '';
-};
 </script>
-
-<style lang="scss" scoped>
-.demo {
-  .nut-placeholder {
-    color: #ccc;
-  }
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/slot.vue b/packages/nutui-taro-demo/src/dentry/pages/input/slot.vue
new file mode 100644
index 0000000000..820a233816
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/slot.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-input v-model="val" placeholder="Slot" clearable>
+    <template #left>
+      <Ask></Ask>
+    </template>
+    <template #right>
+      <nut-button type="primary" size="small">Button</nut-button>
+    </template>
+  </nut-input>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Ask } from '@nutui/icons-vue-taro';
+const val = ref('');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/status.vue b/packages/nutui-taro-demo/src/dentry/pages/input/status.vue
new file mode 100644
index 0000000000..57afa69ad9
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/status.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-input v-model="val1" disabled />
+  <nut-input v-model="val2" readonly />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('Disabled');
+const val2 = ref('Readonly');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/input/type.vue b/packages/nutui-taro-demo/src/dentry/pages/input/type.vue
new file mode 100644
index 0000000000..6ade630d17
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/input/type.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-input v-model="val1" placeholder="Text" />
+  <nut-input v-model="val2" placeholder="Password" type="password" />
+  <nut-input v-model="val3" placeholder="Digit" type="digit" />
+  <nut-input v-model="val4" placeholder="Number" type="number" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('');
+const val2 = ref('');
+const val3 = ref('');
+const val4 = ref('');
+</script>
diff --git a/src/packages/__VUE/input/demo.vue b/src/packages/__VUE/input/demo.vue
deleted file mode 100644
index bc68c10159..0000000000
--- a/src/packages/__VUE/input/demo.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-input v-model="state.val1" :placeholder="translate('textPlaceholder')" :border="false" />
-
-    <h2>{{ translate('title1') }}</h2>
-    <nut-input v-model="state.text" :placeholder="translate('textPlaceholder')" />
-    <nut-input v-model="state.password" :placeholder="translate('passwordPlaceholder')" type="password" />
-    <nut-input v-model="state.number" :placeholder="translate('numberPlaceholder')" type="number" />
-    <nut-input v-model="state.digit" :placeholder="translate('digitPlaceholder')" type="digit" />
-    <h2>{{ translate('title2') }}</h2>
-    <nut-input v-model="state.readonly" :placeholder="translate('readonly')" readonly />
-    <nut-input v-model="state.disabled" :placeholder="translate('disabled')" disabled />
-    <h2>{{ translate('title3') }}</h2>
-    <nut-input v-model="state.clear" :placeholder="translate('clear')" clearable clear-size="14" />
-    <nut-input
-      v-model="state.clear2"
-      :placeholder="translate('clear2')"
-      clearable
-      clear-size="14"
-      show-word-limit
-      max-length="50"
-      :show-clear-icon="true"
-    >
-      <template #clear>
-        <Close width="12" height="12" @click="clearValue"></Close>
-      </template>
-    </nut-input>
-    <h2>{{ translate('title4') }}</h2>
-    <nut-form :model-value="state">
-      <nut-form-item :label="translate('text')" label-align="center">
-        <nut-input v-model="state.val2" :placeholder="translate('textPlaceholder')" :border="false" />
-      </nut-form-item>
-    </nut-form>
-    <h2>{{ translate('title6') }}</h2>
-    <nut-input v-model="state.format1" :placeholder="translate('placeholder1')" :formatter="formatter" />
-    <nut-input
-      v-model="state.format2"
-      :placeholder="translate('placeholder2')"
-      :formatter="formatter"
-      format-trigger="onBlur"
-    />
-    <h2>{{ translate('title7') }}</h2>
-    <nut-input
-      v-model="state.textarea"
-      :placeholder="translate('message')"
-      type="text"
-      show-word-limit
-      max-length="50"
-    />
-
-    <h2>{{ translate('title8') }}</h2>
-    <nut-input v-model="state.align1" :placeholder="translate('placeholder4')" label-align="right" />
-    <nut-input v-model="state.align2" :placeholder="translate('placeholder5')" input-align="right" />
-
-    <h2>{{ translate('title9') }}</h2>
-    <nut-input v-model="state.noBorder1" :border="false" :placeholder="translate('noBorder')" />
-    <nut-input v-model="state.noBorder2" :border="false" :placeholder="translate('noBorder')" />
-
-    <h2>{{ translate('title10') }}</h2>
-    <nut-input
-      v-model="state.event"
-      :placeholder="translate('event')"
-      clearable
-      @clear="clear"
-      @click-input="clickInput"
-    />
-    <h2>{{ translate('title11') }}</h2>
-    <nut-input v-model="state.slotsValue" clearable :placeholder="translate('slots')">
-      <template #left>
-        <Ask></Ask>
-      </template>
-      <template #right>
-        <nut-button type="primary" size="small">{{ translate('slotText') }}</nut-button>
-      </template>
-    </nut-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { Close, Ask } from '@nutui/icons-vue';
-import { showToast } from '@/packages/nutui.vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    title1: '自定义类型',
-    title2: '禁用和只读',
-    title3: '显示清除图标',
-    title4: '配合表单使用',
-    title5: '插入按钮',
-    title6: '格式化输入内容',
-    title7: '显示字数统计',
-    title8: '对齐方式',
-    title9: '无边框',
-    title10: '事件演示',
-    title11: '插槽演示',
-    text: '文本',
-    textPlaceholder: '请输入文本',
-    passwordPlaceholder: '请输入密码',
-    numberPlaceholder: '请输入数字（支持小数）',
-    digitPlaceholder: '请输入整数',
-    telPlaceholder: '请输入手机号',
-    readonly: '输入框只读',
-    disabled: '输入框已禁用',
-    icon: '显示图标',
-    clear: '显示清除图标',
-    clear2: '自定义清除图标',
-    required: '必填项',
-    error: '输入内容标红',
-    code: '短信验证码',
-    codePlaceholder: '请输入短信验证码',
-    sendCode: '发送验证码',
-    message: '请输入留言',
-    noBorder: '输入框无边框',
-    event: '事件演示',
-    slots: '插槽演示',
-    slotText: '获取验证码',
-    placeholder1: '在输入时执行格式化',
-    placeholder2: '在失焦时执行格式化',
-    placeholder3: '请输入留言',
-    placeholder4: '文本内容对齐',
-    placeholder5: '输入框内容对齐'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    title1: 'Custom Type',
-    title2: 'Readonly And Disabled',
-    title3: 'Show Clear Icon',
-    title4: 'Use Form',
-    title5: 'Insert Button',
-    title6: 'Format Value',
-    title7: 'Show Word Limit',
-    title8: 'Input Align',
-    title9: 'No Border',
-    title10: 'Event Demo',
-    title11: 'Slots',
-    text: 'Text',
-    textPlaceholder: 'Text',
-    passwordPlaceholder: 'Password',
-    numberPlaceholder: 'Number (Support Decimals)',
-    digitPlaceholder: 'Digit',
-    telPlaceholder: 'Tel',
-    readonly: 'Readonly',
-    disabled: 'Disabled',
-    icon: 'Show Icon',
-    clear: 'Show Clear Icon',
-    clear2: 'Custom Clear Icon',
-    required: 'Required',
-    error: 'Error',
-    code: 'Code',
-    codePlaceholder: 'Please enter code',
-    sendCode: 'Send',
-    message: 'Message',
-    noBorder: 'No Border',
-    event: 'Event',
-    slots: 'Slots',
-    slotText: 'Verification Code',
-    placeholder1: 'Format On Change',
-    placeholder2: 'Format On Blur',
-    placeholder3: 'Message',
-    placeholder4: 'Label Align',
-    placeholder5: 'Input Align'
-  }
-});
-
-const state = reactive({
-  val1: '',
-  val2: '',
-  text: '',
-  password: '',
-  number: '',
-  digit: '',
-  tel: '',
-  readonly: '',
-  disabled: '',
-  showIcon: '',
-  required: '',
-  error1: '',
-  error2: '',
-  buttonVal: '',
-  format1: '',
-  format2: '',
-  textarea: '',
-  align1: '',
-  align2: '',
-  noBorder1: '',
-  noBorder2: '',
-  clear: '',
-  clear2: '',
-  event: '',
-  slotsValue: ''
-});
-
-const clear = (event: Event) => {
-  showToast.text('clear');
-  console.log('clear:', event);
-};
-const clickInput = (event: Event) => {
-  showToast.text('clickInput');
-  console.log('clickInput:', event);
-};
-const clearValue = () => {
-  state.clear2 = '';
-};
-const formatter = (value: string) => value.replace(/\d/g, '');
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/input/demo/align.vue b/src/packages/__VUE/input/demo/align.vue
new file mode 100644
index 0000000000..64b3e94b40
--- /dev/null
+++ b/src/packages/__VUE/input/demo/align.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-input v-model="val1" input-align="left" />
+  <nut-input v-model="val2" input-align="center" />
+  <nut-input v-model="val3" input-align="right" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('Left');
+const val2 = ref('Center');
+const val3 = ref('Right');
+</script>
diff --git a/src/packages/__VUE/input/demo/basic.vue b/src/packages/__VUE/input/demo/basic.vue
new file mode 100644
index 0000000000..23bb98f67b
--- /dev/null
+++ b/src/packages/__VUE/input/demo/basic.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-input v-model="val" placeholder="Placeholder" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>
diff --git a/src/packages/__VUE/input/demo/border.vue b/src/packages/__VUE/input/demo/border.vue
new file mode 100644
index 0000000000..e200ac25f9
--- /dev/null
+++ b/src/packages/__VUE/input/demo/border.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-input v-model="val1" :border="false" />
+  <nut-input v-model="val2" :border="false" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('12345');
+const val2 = ref('12345');
+</script>
diff --git a/src/packages/__VUE/input/demo/clear.vue b/src/packages/__VUE/input/demo/clear.vue
new file mode 100644
index 0000000000..1ff59dcc4b
--- /dev/null
+++ b/src/packages/__VUE/input/demo/clear.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-input v-model="val1" placeholder="Clearable" clearable />
+  <nut-input v-model="val2" placeholder="Clear Slot" clearable show-clear-icon>
+    <template #clear>
+      <Close width="12" height="12" @click="onClick"></Close>
+    </template>
+  </nut-input>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Close } from '@nutui/icons-vue';
+const val1 = ref('');
+const val2 = ref('');
+const onClick = () => {
+  val2.value = '';
+};
+</script>
diff --git a/src/packages/__VUE/input/demo/count.vue b/src/packages/__VUE/input/demo/count.vue
new file mode 100644
index 0000000000..0415602cf3
--- /dev/null
+++ b/src/packages/__VUE/input/demo/count.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-input v-model="val" show-word-limit :max-length="50" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('12345');
+</script>
diff --git a/src/packages/__VUE/input/demo/event.vue b/src/packages/__VUE/input/demo/event.vue
new file mode 100644
index 0000000000..1a7cf22548
--- /dev/null
+++ b/src/packages/__VUE/input/demo/event.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-input v-model="val" clearable placeholder="Event" @clear="clear" @click-input="click" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+const clear = () => {
+  console.log('clear');
+};
+const click = () => {
+  console.log('click-input');
+};
+</script>
diff --git a/src/packages/__VUE/input/demo/form.vue b/src/packages/__VUE/input/demo/form.vue
new file mode 100644
index 0000000000..4161e23e96
--- /dev/null
+++ b/src/packages/__VUE/input/demo/form.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-form>
+    <nut-form-item label="Label" label-align="center">
+      <nut-input v-model="val" />
+    </nut-form-item>
+  </nut-form>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref('');
+</script>
diff --git a/src/packages/__VUE/input/demo/format.vue b/src/packages/__VUE/input/demo/format.vue
new file mode 100644
index 0000000000..bab0b02232
--- /dev/null
+++ b/src/packages/__VUE/input/demo/format.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-input v-model="val1" placeholder="Format on Change" :formatter="formatter" format-trigger="onChange" />
+  <nut-input v-model="val2" placeholder="Format on Blur" :formatter="formatter" format-trigger="onBlur" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('');
+const val2 = ref('');
+const formatter = (value) => value.replace(/\d/g, '');
+</script>
diff --git a/src/packages/__VUE/input/demo/index.vue b/src/packages/__VUE/input/demo/index.vue
new file mode 100644
index 0000000000..0a49da442b
--- /dev/null
+++ b/src/packages/__VUE/input/demo/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('type') }}</h2>
+    <Type />
+
+    <h2>{{ t('status') }}</h2>
+    <Status />
+
+    <h2>{{ t('clear') }}</h2>
+    <Clear />
+
+    <h2>{{ t('form') }}</h2>
+    <Form />
+
+    <h2>{{ t('format') }}</h2>
+    <Format />
+
+    <h2>{{ t('count') }}</h2>
+    <Count />
+
+    <h2>{{ t('border') }}</h2>
+    <Border />
+
+    <h2>{{ t('align') }}</h2>
+    <Align />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
+
+    <h2>{{ t('slot') }}</h2>
+    <SlotDemo />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Type from './type.vue';
+import Status from './status.vue';
+import Clear from './clear.vue';
+import Form from './form.vue';
+import Format from './format.vue';
+import Count from './count.vue';
+import Border from './border.vue';
+import Align from './align.vue';
+import Event from './event.vue';
+import SlotDemo from './slot.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    type: '自定义类型',
+    status: '禁用和只读',
+    clear: '显示清除图标',
+    form: '配合表单使用',
+    format: '格式化输入内容',
+    count: '显示字数统计',
+    border: '无边框',
+    align: '对齐方式',
+    event: '事件演示',
+    slot: '插槽演示'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    type: 'Custom Type',
+    status: 'Disabled & Readonly',
+    clear: 'Show Clear Icon',
+    form: 'Use Form',
+    format: 'Format Value',
+    count: 'Show Word Limit',
+    border: 'No Border',
+    align: 'Input Align',
+    event: 'Event',
+    slot: 'Slot'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/input/demo/slot.vue b/src/packages/__VUE/input/demo/slot.vue
new file mode 100644
index 0000000000..2e21e214ff
--- /dev/null
+++ b/src/packages/__VUE/input/demo/slot.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-input v-model="val" placeholder="Slot" clearable>
+    <template #left>
+      <Ask></Ask>
+    </template>
+    <template #right>
+      <nut-button type="primary" size="small">Button</nut-button>
+    </template>
+  </nut-input>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Ask } from '@nutui/icons-vue';
+const val = ref('');
+</script>
diff --git a/src/packages/__VUE/input/demo/status.vue b/src/packages/__VUE/input/demo/status.vue
new file mode 100644
index 0000000000..57afa69ad9
--- /dev/null
+++ b/src/packages/__VUE/input/demo/status.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-input v-model="val1" disabled />
+  <nut-input v-model="val2" readonly />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('Disabled');
+const val2 = ref('Readonly');
+</script>
diff --git a/src/packages/__VUE/input/demo/type.vue b/src/packages/__VUE/input/demo/type.vue
new file mode 100644
index 0000000000..fd8c709d96
--- /dev/null
+++ b/src/packages/__VUE/input/demo/type.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-input v-model="val1" placeholder="Text" />
+  <nut-input v-model="val2" placeholder="Password" type="password" />
+  <nut-input v-model="val3" placeholder="Number" type="number" />
+  <nut-input v-model="val4" placeholder="Digit" type="digit" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref('');
+const val2 = ref('');
+const val3 = ref('');
+const val4 = ref('');
+</script>
diff --git a/src/packages/__VUE/input/doc.en-US.md b/src/packages/__VUE/input/doc.en-US.md
index a68ae10cbd..5f26905103 100644
--- a/src/packages/__VUE/input/doc.en-US.md
+++ b/src/packages/__VUE/input/doc.en-US.md
@@ -18,233 +18,55 @@ app.use(Input);
 
 The value of field is bound with `v-model`.
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" placeholder="Text" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input basic
 
 ### Custom Type
 
-Use `type` prop to custom different type fields.
-
-:::demo
-
-```vue
-<template>
-  <nut-input placeholder="Text" v-model="state.text" />
-  <nut-input placeholder="Password" v-model="state.password" type="password" />
-  <nut-input placeholder="Number" v-model="state.number" type="number" />
-  <nut-input placeholder="Digit" v-model="state.digit" type="digit" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  text: '',
-  password: '',
-  number: '',
-  digit: ''
-});
-</script>
-```
-
-:::
+> demo: input type
 
 ### Readonly And Disabled
 
-Use `readonly` to set the input box to read-only status, and use `disabled` to set the input box to disabled status.
-
-:::demo
-
-```vue
-<template>
-  <nut-input placeholder="Readonly" v-model="state.readonly" readonly />
-  <nut-input placeholder="Disabled" v-model="state.disabled" disabled />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  readonly: '',
-  disabled: ''
-});
-</script>
-```
-
-:::
+> demo: input status
 
 ### Show Clear Icon
 
 Display the clear icon during input by setting 'clearable'. The clear button will be hidden after losing focus. You can set the clear button to continue to display after losing focus through 'showClearIcon'.
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.clear" placeholder="Show Clear Icon" clearable clearSize="14" />
-  <nut-input
-    v-model="state.clear2"
-    placeholder="Custom Clear Icon"
-    clearable
-    clearSize="14"
-    show-word-limit
-    max-length="50"
-    :showClearIcon="true"
-  >
-    <template #clear>
-      <Close width="12" height="12" @click="clearValue"></Close>
-    </template>
-  </nut-input>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Close } from '@nutui/icons-vue';
-const state = reactive({
-  clear: '',
-  clear2: ''
-});
-const clearValue = () => {
-  state.clear2 = '';
-};
-</script>
-```
-
-:::
+> demo: input clear
 
 ### Use With Form
 
 Use in combination with `nut-form` and `nut-form-item`
 
-:::demo
-
-```vue
-<template>
-  <nut-form :model-value="state">
-    <nut-form-item label="Text" label-align="center">
-      <nut-input v-model="state.val1" placeholder="Text" :border="false" />
-    </nut-form-item>
-  </nut-form>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  val1: ''
-});
-</script>
-```
-
-:::
+> demo: input form
 
 ### Format Value
 
 Use `formatter` prop to format the input value.
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.format1" placeholder="Format On Change" :formatter="formatter" format-trigger="onChange" />
-  <nut-input v-model="state.format2" placeholder="Format On Blur" :formatter="formatter" format-trigger="onBlur" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  format1: '',
-  format2: ''
-});
-const formatter = (value) => value.replace(/\d/g, '');
-</script>
-```
-
-:::
+> demo: input format
 
 ### Show Word Limit
 
 After setting the `maxlength` and `show-word-limit` attributes, word count will be displayed at the bottom.
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.text" type="text" show-word-limit rows="2" max-length="50" placeholder="Message" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input count
 
 ### No Border
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.val1" :border="false" placeholder="No Border" />
-  <nut-input v-model="state.val2" :border="false" placeholder="No Border" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  val1: '',
-  val2: ''
-});
-</script>
-```
+> demo: input border
 
-:::
-
-### Event Demo
-
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" clearable placeholder="Event" @clear="clear" @click-input="clickInput" />
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const val = ref('');
-const clear = () => {
-  showToast.text('clear');
-};
-const clickInput = () => {
-  showToast.text('clickInput');
-};
-</script>
-```
+### Input Align
 
-:::
+> demo: input align
 
-### Slots Demo
+### Event
 
-:::demo
+> demo: input event
 
-```vue
-<template>
-  <nut-input v-model="val" placeholder="Slots Demo" clearable>
-    <template #left> <Ask></Ask> </template>
-    <template #right> <nut-button type="primary" size="small">Verification Code</nut-button> </template>
-  </nut-input>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Ask } from '@nutui/icons-vue';
-const val = ref('');
-</script>
-```
+### Slot
 
-:::
+> demo: input slot
 
 ## API
 
diff --git a/src/packages/__VUE/input/doc.md b/src/packages/__VUE/input/doc.md
index b54db3323f..29dbcde38f 100644
--- a/src/packages/__VUE/input/doc.md
+++ b/src/packages/__VUE/input/doc.md
@@ -18,240 +18,67 @@ app.use(Input);
 
 可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" placeholder="请输入文本" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input basic
 
 ### 自定义类型
 
-根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
-
-:::demo
-
-```vue
-<template>
-  <nut-input placeholder="请输入文本" v-model="state.text" />
-  <nut-input placeholder="请输入密码" v-model="state.password" type="password" />
-  <nut-input placeholder="请输入数字（支持小数）" v-model="state.number" type="number" />
-  <nut-input placeholder="请输入整数" v-model="state.digit" type="digit" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  text: '',
-  password: '',
-  number: '',
-  digit: ''
-});
-</script>
-```
+- `text`: 默认值，文本类型
+- `password`: 密码类型
+- `number`: 数字类型，支持小数
+- `digit`: 整数类型
 
-:::
+> demo: input type
 
 ### 禁用和只读
 
-通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
-
-:::demo
-
-```vue
-<template>
-  <nut-input placeholder="输入框只读" v-model="state.readonly" readonly />
-  <nut-input placeholder="输入框已禁用" v-model="state.disabled" disabled />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  readonly: '',
-  disabled: ''
-});
-</script>
-```
+- `readonly`: 只读状态
+- `disabled`: 禁用状态
 
-:::
+> demo: input status
 
 ### 显示清除图标
 
-通过设置 `clearable` 在输入过程中展示清除图标。清除按钮，在失去焦点后将隐藏,可通过 `showClearIcon` 设置失去焦点后继续展示清除按钮。
-
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.clear" placeholder="显示清除图标" clearable clearSize="14" />
-  <nut-input
-    v-model="state.clear2"
-    placeholder="自定义清除图标"
-    clearable
-    clearSize="14"
-    show-word-limit
-    max-length="50"
-    :showClearIcon="true"
-  >
-    <template #clear>
-      <Close width="12" height="12" @click="clearValue"></Close>
-    </template>
-  </nut-input>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Close } from '@nutui/icons-vue';
-const state = reactive({
-  clear: '',
-  clear2: ''
-});
-const clearValue = () => {
-  state.clear2 = '';
-};
-</script>
-```
+开启 `clearable` 后，在输入过程中会展示清除图标，在失去焦点后将隐藏。
 
-:::
+开启 `show-clear-icon` 后，失去焦点时仍会继续展示清除按钮。
+
+> demo: input clear
 
 ### 配合表单使用
 
 结合 `nut-form` 与 `nut-form-item` 使用
 
-:::demo
-
-```vue
-<template>
-  <nut-form :model-value="state">
-    <nut-form-item label="文本" label-align="center">
-      <nut-input v-model="state.val1" placeholder="请输入文本" :border="false" />
-    </nut-form-item>
-  </nut-form>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  val1: ''
-});
-</script>
-```
-
-:::
+> demo: input form
 
 ### 格式化输入内容
 
 通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机。例如只允许输入非数字的字符：
 
-:::demo
-
-```vue
-<template>
-  <nut-input
-    v-model="state.format1"
-    placeholder="在输入时执行格式化"
-    :formatter="formatter"
-    format-trigger="onChange"
-  />
-  <nut-input v-model="state.format2" placeholder="在失焦时执行格式化" :formatter="formatter" format-trigger="onBlur" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  format1: '',
-  format2: ''
-});
-const formatter = (value) => value.replace(/\d/g, '');
-</script>
-```
-
-:::
+> demo: input format
 
 ### 显示字数统计
 
 设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" type="text" show-word-limit rows="2" max-length="50" placeholder="请输入留言" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input count
 
 ### 无边框
 
 通过 `border` 属性可以设置输入框的边框。
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.val1" :border="false" placeholder="输入框无边框" />
-  <nut-input v-model="state.val2" :border="false" placeholder="输入框无边框" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  val1: '',
-  val2: ''
-});
-</script>
-```
+> demo: input border
 
-:::
+### 对齐方式
 
-### 事件演示
+> demo: input border
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" clearable placeholder="事件演示" @clear="clear" @click-input="clickInput" />
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const val = ref('');
-const clear = () => {
-  showToast.text('clear');
-};
-const clickInput = () => {
-  showToast.text('clickInput');
-};
-</script>
-```
+### 事件演示
 
-:::
+> demo: input event
 
 ### 插槽演示
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" placeholder="插槽演示" clearable>
-    <template #left> <Ask></Ask> </template>
-    <template #right> <nut-button type="primary" size="small">获取验证码</nut-button> </template>
-  </nut-input>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Ask } from '@nutui/icons-vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input slot
 
 ## API
 
diff --git a/src/packages/__VUE/input/doc.taro.md b/src/packages/__VUE/input/doc.taro.md
index 061129fa6c..1b29226919 100644
--- a/src/packages/__VUE/input/doc.taro.md
+++ b/src/packages/__VUE/input/doc.taro.md
@@ -18,253 +18,71 @@ app.use(Input);
 
 可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" placeholder="请输入文本" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input basic dentry
 
 ### 自定义类型
 
-根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
-
 > NutUI < 4.2.0 时，number 类型为小数，digit 类型为整数。
 >
 > NutUI >= 4.2.0 时，调整为与小程序原生 input 的类型字段保持一致（如下示例），同时支持调用原生整数键盘、带小数点键盘。
 
-:::demo
-
-```vue
-<template>
-  <nut-input placeholder="请输入文本" v-model="state.text" />
-  <nut-input placeholder="请输入密码" v-model="state.password" type="password" />
-  <nut-input placeholder="请输入数字（支持小数）" v-model="state.digit" type="digit" />
-  <nut-input placeholder="请输入整数" v-model="state.number" type="number" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  text: '',
-  password: '',
-  number: '',
-  digit: ''
-});
-</script>
-```
+- `text`: 默认值，文本类型
+- `password`: 密码类型
+- `digit`: 数字类型，支持小数
+- `number`: 整数类型
 
-:::
+> demo: input type dentry
 
 ### 禁用和只读
 
-通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
-
-:::demo
-
-```vue
-<template>
-  <nut-input placeholder="输入框只读" v-model="state.readonly" readonly />
-  <nut-input placeholder="输入框已禁用" v-model="state.disabled" disabled />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  readonly: '',
-  disabled: ''
-});
-</script>
-```
+- `readonly`: 只读状态
+- `disabled`: 禁用状态
 
-:::
+> demo: input status dentry
 
 ### 显示清除图标
 
-通过设置 `clearable` 在输入过程中展示清除图标。清除按钮，在失去焦点后将隐藏,可通过 `showClearIcon` 设置失去焦点后继续展示清除按钮。
-
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.clear" placeholder="显示清除图标" clearable clearSize="14" />
-  <nut-input
-    v-model="state.clear2"
-    placeholder="自定义清除图标"
-    clearable
-    clearSize="14"
-    show-word-limit
-    max-length="50"
-    :showClearIcon="true"
-  >
-    <template #clear>
-      <Close width="12" height="12" size="12" @click="clearValue"></Close>
-    </template>
-  </nut-input>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Close } from '@nutui/icons-vue-taro';
-const state = reactive({
-  clear: '',
-  clear2: ''
-});
-const clearValue = () => {
-  state.clear2 = '';
-};
-</script>
-```
+开启 `clearable` 后，在输入过程中会展示清除图标，在失去焦点后将隐藏。
+
+开启 `show-clear-icon` 后，失去焦点时仍会继续展示清除按钮。
 
-:::
+> demo: input clear dentry
 
 ### 配合表单使用
 
 结合 `nut-form` 与 `nut-form-item` 使用
 
-:::demo
-
-```vue
-<template>
-  <nut-form :model-value="state">
-    <nut-form-item label="文本" label-align="center">
-      <nut-input v-model="state.val1" placeholder="请输入文本" :border="false" />
-    </nut-form-item>
-  </nut-form>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  val1: ''
-});
-</script>
-```
-
-:::
+> demo: input form dentry
 
 ### 格式化输入内容
 
 通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机。例如只允许输入非数字的字符：
 
-:::demo
-
-```vue
-<template>
-  <nut-input
-    v-model="state.format1"
-    placeholder="在输入时执行格式化"
-    :formatter="formatter"
-    format-trigger="onChange"
-  />
-  <nut-input v-model="state.format2" placeholder="在失焦时执行格式化" :formatter="formatter" format-trigger="onBlur" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  format1: '',
-  format2: ''
-});
-const formatter = (value) => value.replace(/\d/g, '');
-</script>
-```
-
-:::
+> demo: input format dentry
 
 ### 显示字数统计
 
 设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" type="text" show-word-limit rows="2" max-length="50" placeholder="请输入留言" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input count dentry
 
 ### 无边框
 
 通过 `border` 属性可以设置输入框的边框。
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.val1" :border="false" placeholder="输入框无边框" />
-  <nut-input v-model="state.val2" :border="false" placeholder="输入框无边框" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  val1: '',
-  val2: ''
-});
-</script>
-```
+> demo: input border dentry
 
-:::
+### 对齐方式
 
-### 事件演示
+> demo: input border dentry
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="state.val" clearable placeholder="事件演示" @clear="clear" @click-input="clickInput" />
-  <nut-toast :msg="state.msg" v-model:visible="state.show" type="text" />
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui-taro';
-const state = reactive({
-  val: '',
-  show: false,
-  msg: ''
-});
-const showToast = (msg) => {
-  state.show = true;
-  state.msg = msg;
-};
-const clear = () => {
-  showToast('clear');
-};
-const clickInput = () => {
-  showToast('clickInput');
-};
-</script>
-```
+### 事件演示
 
-:::
+> demo: input event dentry
 
 ### 插槽演示
 
-:::demo
-
-```vue
-<template>
-  <nut-input v-model="val" placeholder="插槽演示" clearable>
-    <template #left> <Ask></Ask> </template>
-    <template #right> <nut-button type="primary" size="small">获取验证码</nut-button> </template>
-  </nut-input>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { Ask } from '@nutui/icons-vue-taro';
-const val = ref('');
-</script>
-```
-
-:::
+> demo: input slot dentry
 
 ## API