From e6067ba9fe59e9919ec91df61702fa88c070a1d6 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Tue, 23 Jan 2024 23:40:54 +0800
Subject: [PATCH] chore(number-keyboard): split demo (#2867)

---
 .../src/dentry/pages/numberkeyboard/basic.vue |  22 ++
 .../dentry/pages/numberkeyboard/idcard.vue    |  20 ++
 .../src/dentry/pages/numberkeyboard/index.vue | 109 ++++------
 .../dentry/pages/numberkeyboard/random.vue    |  19 ++
 .../src/dentry/pages/numberkeyboard/right.vue |  22 ++
 .../src/dentry/pages/numberkeyboard/title.vue |  19 ++
 .../src/dentry/pages/numberkeyboard/value.vue |  17 ++
 src/packages/__VUE/numberkeyboard/demo.vue    | 119 -----------
 .../__VUE/numberkeyboard/demo/basic.vue       |  21 ++
 .../__VUE/numberkeyboard/demo/idcard.vue      |  19 ++
 .../__VUE/numberkeyboard/demo/index.vue       |  50 +++++
 .../__VUE/numberkeyboard/demo/random.vue      |  12 ++
 .../__VUE/numberkeyboard/demo/right.vue       |  21 ++
 .../__VUE/numberkeyboard/demo/title.vue       |  12 ++
 .../__VUE/numberkeyboard/demo/value.vue       |  10 +
 .../__VUE/numberkeyboard/doc.en-US.md         | 188 ++----------------
 src/packages/__VUE/numberkeyboard/doc.md      | 175 +---------------
 src/packages/__VUE/numberkeyboard/doc.taro.md | 170 +---------------
 18 files changed, 329 insertions(+), 696 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/idcard.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/random.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/right.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/title.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/value.vue
 delete mode 100644 src/packages/__VUE/numberkeyboard/demo.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/basic.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/idcard.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/index.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/random.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/right.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/title.vue
 create mode 100644 src/packages/__VUE/numberkeyboard/demo/value.vue

diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/basic.vue
new file mode 100644
index 0000000000..0e79d714b8
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-cell title="default" @click="show = true" />
+  <nut-number-keyboard
+    v-model:visible="show"
+    overlay
+    @input="onInput"
+    @delete="onDelete"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const onInput = (val: string) => {
+  console.log(val);
+};
+const onDelete = () => {
+  console.log('onDelete');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/idcard.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/idcard.vue
new file mode 100644
index 0000000000..a70bd4d1da
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/idcard.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-cell title="idcard" @click="show = true"></nut-cell>
+  <nut-number-keyboard
+    v-model:visible="show"
+    overlay
+    :custom-key="customKey"
+    @input="onInput"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const customKey = ref(['X']);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue
index 4920c0a8b1..82bcab7f2d 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue
@@ -1,77 +1,50 @@
 <template>
   <Demo>
-    <nut-cell :is-link="true" title="默认键盘" @click="showKeyBoard(1)"></nut-cell>
-    <nut-number-keyboard v-model:visible="visible1" overlay @input="input" @delete="onDelete" @close="close(1)">
-    </nut-number-keyboard>
-    <nut-cell :is-link="true" title="带右侧栏键盘" @click="showKeyBoard(2)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible2"
-      type="rightColumn"
-      overlay
-      :custom-key="customKey1"
-      @input="input"
-      @close="close(2)"
-    >
-    </nut-number-keyboard>
-    <nut-cell :is-link="true" title="随机数键盘" @click="showKeyBoard(3)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible3"
-      type="rightColumn"
-      overlay
-      :random-keys="true"
-      :custom-key="customKey1"
-      @input="input"
-      @close="close(3)"
-    >
-    </nut-number-keyboard>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-cell :is-link="true" title="带标题栏键盘" @click="showKeyBoard(4)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible4"
-      title="默认键盘"
-      overlay
-      :custom-key="customKey2"
-      @input="input"
-      @close="close(4)"
-    >
-    </nut-number-keyboard>
-    <nut-cell :is-link="true" title="身份证键盘" @click="showKeyBoard(6)"></nut-cell>
-    <nut-number-keyboard v-model:visible="visible6" overlay :custom-key="customKey3" @input="input" @close="close(6)">
-    </nut-number-keyboard>
-    <nut-cell :is-link="true" :desc="value" title="双向绑定" @click="showKeyBoard(5)"></nut-cell>
-    <nut-number-keyboard v-model:visible="visible5" v-model="value" overlay maxlength="6" @close="close(5)">
-    </nut-number-keyboard>
+    <h2>{{ t('right') }}</h2>
+    <Right />
+
+    <h2>{{ t('random') }}</h2>
+    <Random />
+
+    <h2>{{ t('title') }}</h2>
+    <Title />
+
+    <h2>{{ t('idcard') }}</h2>
+    <Idcard />
+
+    <h2>{{ t('value') }}</h2>
+    <Value />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Right from './right.vue';
+import Random from './random.vue';
+import Title from './title.vue';
+import Idcard from './idcard.vue';
+import Value from './value.vue';
 
-const visible1 = ref(false);
-const visible2 = ref(false);
-const visible3 = ref(false);
-const visible4 = ref(false);
-const visible5 = ref(false);
-const visible6 = ref(false);
-const value = ref('');
-const customKey1 = reactive(['.']);
-const customKey2 = reactive(['.', 'x']);
-const customKey3 = reactive(['X']);
-const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
-function input(number: any) {
-  console.log(number);
-}
-function showKeyBoard(index: number) {
-  visibleArr[index - 1].value = true;
-}
-function onDelete() {}
-function close(index: number) {
-  visibleArr[index - 1].value = false;
-}
+const t = useTranslate({
+  'zh-CN': {
+    basic: '默认键盘',
+    right: '带右侧栏键盘',
+    random: '随机数键盘',
+    title: '带标题栏键盘',
+    idcard: '身份证键盘',
+    value: '双向绑定：'
+  },
+  'en-US': {
+    basic: 'Default',
+    right: 'RightColumn',
+    random: 'Random',
+    title: 'Title',
+    idcard: 'Idcard',
+    value: 'v-model'
+  }
+});
 </script>
-
-<style lang="scss" scoped>
-.nut-button {
-  margin-right: 10px;
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/random.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/random.vue
new file mode 100644
index 0000000000..93dae61cbb
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/random.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="random" @click="show = true" />
+  <nut-number-keyboard
+    v-model:visible="show"
+    overlay
+    random-keys
+    @input="onInput"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/right.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/right.vue
new file mode 100644
index 0000000000..e943bae7e5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/right.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-cell title="rightColumn" @click="show = true"></nut-cell>
+  <nut-number-keyboard
+    v-model:visible="show"
+    type="rightColumn"
+    overlay
+    :custom-key="customKey"
+    confirm-text="支付"
+    @input="onInput"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const customKey = ref(['.']);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/title.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/title.vue
new file mode 100644
index 0000000000..0267704808
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/title.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="title" @click="show = true" />
+  <nut-number-keyboard
+    v-model:visible="show"
+    title="Title"
+    overlay
+    @input="onInput"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/value.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/value.vue
new file mode 100644
index 0000000000..4149b869ad
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/value.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-cell title="v-model" :desc="val" @click="show = true" />
+  <nut-number-keyboard
+    v-model:visible="show"
+    v-model="val"
+    overlay
+    :max-length="6"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo.vue b/src/packages/__VUE/numberkeyboard/demo.vue
deleted file mode 100644
index 0a5d9781fb..0000000000
--- a/src/packages/__VUE/numberkeyboard/demo.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div class="demo">
-    <nut-cell :is-link="true" :title="translate('basic')" @touchstart.stop="showKeyBoard(1)"></nut-cell>
-    <nut-number-keyboard v-model:visible="visible1" @blur="onBlur(1)" @input="input" @delete="onDelete">
-    </nut-number-keyboard>
-    <nut-cell :is-link="true" :title="translate('sidebar')" @touchstart.stop="showKeyBoard(2)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible2"
-      type="rightColumn"
-      :custom-key="customKey1"
-      :confirm-text="translate('confirmText')"
-      @input="input"
-      @close="close"
-      @blur="onBlur(2)"
-    >
-    </nut-number-keyboard>
-    <nut-cell :is-link="true" :title="translate('randomKeyOrder')" @touchstart.stop="showKeyBoard(3)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible3"
-      type="rightColumn"
-      :random-keys="true"
-      :custom-key="customKey1"
-      @input="input"
-      @close="close"
-      @blur="onBlur(3)"
-    >
-    </nut-number-keyboard>
-
-    <nut-cell :is-link="true" :title="translate('withTitle')" @touchstart.stop="showKeyBoard(4)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible4"
-      :title="translate('title')"
-      :custom-key="customKey2"
-      @input="input"
-      @close="close"
-      @blur="onBlur(4)"
-    >
-    </nut-number-keyboard>
-
-    <nut-cell :is-link="true" :title="translate('idNumberKeyboard')" @touchstart.stop="showKeyBoard(6)"></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible6"
-      :custom-key="customKey3"
-      @input="input"
-      @blur="onBlur(6)"
-      @close="close"
-    >
-    </nut-number-keyboard>
-    <nut-cell
-      :is-link="true"
-      desc-text-align="left"
-      :desc="value"
-      :title="translate('bindValue')"
-      @touchstart.stop="showKeyBoard(5)"
-    ></nut-cell>
-    <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close">
-    </nut-number-keyboard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '默认键盘',
-    sidebar: '带右侧栏键盘',
-    confirmText: '支付',
-    randomKeyOrder: '随机数键盘',
-    title: '标题',
-    withTitle: '带标题栏键盘',
-    idNumberKeyboard: '身份证键盘',
-    bindValue: '双向绑定：'
-  },
-  'en-US': {
-    basic: 'Default Keyboard',
-    sidebar: 'Keyboard With Sidebar',
-    confirmText: 'pay',
-    randomKeyOrder: 'Random Key Order',
-    title: 'title',
-    withTitle: 'Show Keyboard With Title',
-    idNumberKeyboard: 'Show IdNumber Keyboard',
-    bindValue: 'Bind Value：'
-  }
-});
-const visible1 = ref(false);
-const visible2 = ref(false);
-const visible3 = ref(false);
-const visible4 = ref(false);
-const visible6 = ref(false);
-const visible5 = ref(false);
-const value = ref('');
-const customKey1 = reactive(['.']);
-const customKey2 = reactive(['.']);
-const customKey3 = reactive(['X']);
-const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
-function input(number: any) {
-  showToast.text(`输入：${number}`);
-}
-function showKeyBoard(index: number) {
-  visibleArr[index - 1].value = true;
-}
-function onDelete() {
-  showToast.text('删除');
-}
-function close() {
-  console.log('关闭');
-}
-function onBlur(index: number) {
-  visibleArr[index - 1].value = false;
-}
-</script>
-
-<style lang="scss" scoped>
-.nut-button {
-  margin-right: 10px;
-}
-</style>
diff --git a/src/packages/__VUE/numberkeyboard/demo/basic.vue b/src/packages/__VUE/numberkeyboard/demo/basic.vue
new file mode 100644
index 0000000000..0d87f013e6
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/basic.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-cell title="default" @click="show = true" />
+  <nut-number-keyboard
+    v-model:visible="show"
+    @input="onInput"
+    @delete="onDelete"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const onInput = (val: string) => {
+  console.log(val);
+};
+const onDelete = () => {
+  console.log('onDelete');
+};
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo/idcard.vue b/src/packages/__VUE/numberkeyboard/demo/idcard.vue
new file mode 100644
index 0000000000..4316eec1ce
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/idcard.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="idcard" @click="show = true"></nut-cell>
+  <nut-number-keyboard
+    v-model:visible="show"
+    :custom-key="customKey"
+    @input="onInput"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const customKey = ref(['X']);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo/index.vue b/src/packages/__VUE/numberkeyboard/demo/index.vue
new file mode 100644
index 0000000000..0b0c3079cf
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('right') }}</h2>
+    <Right />
+
+    <h2>{{ t('random') }}</h2>
+    <Random />
+
+    <h2>{{ t('title') }}</h2>
+    <Title />
+
+    <h2>{{ t('idcard') }}</h2>
+    <Idcard />
+
+    <h2>{{ t('value') }}</h2>
+    <Value />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Right from './right.vue';
+import Random from './random.vue';
+import Title from './title.vue';
+import Idcard from './idcard.vue';
+import Value from './value.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '默认键盘',
+    right: '带右侧栏键盘',
+    random: '随机数键盘',
+    title: '带标题栏键盘',
+    idcard: '身份证键盘',
+    value: '双向绑定：'
+  },
+  'en-US': {
+    basic: 'Default',
+    right: 'RightColumn',
+    random: 'Random',
+    title: 'Title',
+    idcard: 'Idcard',
+    value: 'v-model'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo/random.vue b/src/packages/__VUE/numberkeyboard/demo/random.vue
new file mode 100644
index 0000000000..297d8238e5
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/random.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="random" @click="show = true" />
+  <nut-number-keyboard v-model:visible="show" random-keys @input="onInput" @blur="show = false" @close="show = false">
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo/right.vue b/src/packages/__VUE/numberkeyboard/demo/right.vue
new file mode 100644
index 0000000000..4986bd6358
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/right.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-cell title="rightColumn" @click="show = true"></nut-cell>
+  <nut-number-keyboard
+    v-model:visible="show"
+    type="rightColumn"
+    :custom-key="customKey"
+    confirm-text="支付"
+    @input="onInput"
+    @blur="show = false"
+    @close="show = false"
+  >
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const customKey = ref(['.']);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo/title.vue b/src/packages/__VUE/numberkeyboard/demo/title.vue
new file mode 100644
index 0000000000..dfeaf3f1f0
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/title.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="title" @click="show = true" />
+  <nut-number-keyboard v-model:visible="show" title="Title" @input="onInput" @blur="show = false" @close="show = false">
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const onInput = (val: string) => {
+  console.log(val);
+};
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/demo/value.vue b/src/packages/__VUE/numberkeyboard/demo/value.vue
new file mode 100644
index 0000000000..f921dda949
--- /dev/null
+++ b/src/packages/__VUE/numberkeyboard/demo/value.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell title="v-model" :desc="val" @click="show = true" />
+  <nut-number-keyboard v-model:visible="show" v-model="val" :max-length="6" @blur="show = false" @close="show = false">
+  </nut-number-keyboard>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+</script>
diff --git a/src/packages/__VUE/numberkeyboard/doc.en-US.md b/src/packages/__VUE/numberkeyboard/doc.en-US.md
index e4323d8b9d..168adee3e2 100644
--- a/src/packages/__VUE/numberkeyboard/doc.en-US.md
+++ b/src/packages/__VUE/numberkeyboard/doc.en-US.md
@@ -14,193 +14,29 @@ const app = createApp();
 app.use(NumberKeyboard);
 ```
 
-### Default Keyboard
+### Basic Usage
 
-For online debugging, please change the browser to mobile mode
-:::demo
+> demo: numberkeyboard basic
 
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="Default Keyboard"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`enter：${number}`);
-}
-function onDelete() {
-  showToast.text('delete');
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
-
-### Keyboard With Sidebar
-
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="Keyboard With Sidebar"></nut-cell>
-  <nut-number-keyboard
-    type="rightColumn"
-    v-model:visible="visible"
-    :custom-key="customKey"
-    confirm-text="pay"
-    @input="input"
-    @close="close"
-  >
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`enter${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
-
-### Random Key Order
-
-:::demo
+### RightColumn
 
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="Random Key Order"></nut-cell>
-  <nut-number-keyboard
-    type="rightColumn"
-    v-model:visible="visible"
-    :randomKeys="true"
-    :custom-key="customKey"
-    @input="input"
-    @close="close"
-  >
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`enter：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard right
 
-### Show Keyboard With Title
+### Random
 
-:::demo
+> demo: numberkeyboard random
 
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard(4)" title="Show Keyboard With Title"></nut-cell>
-  <nut-number-keyboard title="title" v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`enter：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
+### Title
 
-:::
+> demo: numberkeyboard title
 
-### Show IdNumber Keyboard
+### Idcard
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard(4)" title="IdNumber Keyboard"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['X']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`enter：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
+> demo: numberkeyboard idcard
 
-:::
-
-### Bind Value
-
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" desc-text-align="left" @click="showKeyBoard" :desc="value" title="Bind Value"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" v-model:value="value" maxlength="6" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const value = ref('');
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
+### v-model
 
-:::
+> demo: numberkeyboard value
 
 ## API
 
diff --git a/src/packages/__VUE/numberkeyboard/doc.md b/src/packages/__VUE/numberkeyboard/doc.md
index bb2199dcad..0502c9f6d3 100644
--- a/src/packages/__VUE/numberkeyboard/doc.md
+++ b/src/packages/__VUE/numberkeyboard/doc.md
@@ -16,190 +16,27 @@ app.use(NumberKeyboard);
 
 ### 默认键盘
 
-在线调试请将浏览器变为手机模式
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="默认键盘"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`输入：${number}`);
-}
-function onDelete() {
-  showToast.text('删除');
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard basic
 
 ### 带右侧栏键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="带右侧栏键盘"></nut-cell>
-  <nut-number-keyboard
-    type="rightColumn"
-    v-model:visible="visible"
-    :custom-key="customKey"
-    confirm-text="支付"
-    @input="input"
-    @close="close"
-  >
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard right
 
 ### 随机数键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="随机数键盘"></nut-cell>
-  <nut-number-keyboard
-    type="rightColumn"
-    v-model:visible="visible"
-    :randomKeys="true"
-    :custom-key="customKey"
-    @input="input"
-    @close="close"
-  >
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard random
 
 ### 带标题栏键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
-  <nut-number-keyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard title
 
 ### 身份证键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard(4)" title="身份证键盘"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const visible = ref(false);
-const customKey = reactive(['X']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  showToast.text(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard idcard
 
 ### 双向绑定
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" desc-text-align="left" @click="showKeyBoard" :desc="value" title="双向绑定："></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" v-model="value" maxlength="6" @close="close"> </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const value = ref('');
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard value
 
 ## API
 
diff --git a/src/packages/__VUE/numberkeyboard/doc.taro.md b/src/packages/__VUE/numberkeyboard/doc.taro.md
index f1a25c3eb2..5fc88d548e 100644
--- a/src/packages/__VUE/numberkeyboard/doc.taro.md
+++ b/src/packages/__VUE/numberkeyboard/doc.taro.md
@@ -16,185 +16,27 @@ app.use(NumberKeyboard);
 
 ### 默认键盘
 
-在线调试请将浏览器变为手机模式
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="默认键盘"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  console.log(`输入：${number}`);
-}
-function onDelete() {
-  console.log('删除');
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard basic dentry
 
 ### 带右侧栏键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="带右侧栏键盘"></nut-cell>
-  <nut-number-keyboard
-    type="rightColumn"
-    v-model:visible="visible"
-    :custom-key="customKey"
-    confirm-text="支付"
-    @input="input"
-    @close="close"
-  >
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  console.log(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard right dentry
 
 ### 随机数键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard" title="随机数键盘"></nut-cell>
-  <nut-number-keyboard
-    type="rightColumn"
-    v-model:visible="visible"
-    :randomKeys="true"
-    :custom-key="customKey"
-    @input="input"
-    @close="close"
-  >
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  console.log(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard random dentry
 
 ### 带标题栏键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
-  <nut-number-keyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  console.log(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard title dentry
 
 ### 身份证键盘
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" @click="showKeyBoard(4)" title="身份证键盘"></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const customKey = reactive(['X']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function input(number) {
-  console.log(`输入：${number}`);
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard idcard dentry
 
 ### 双向绑定
 
-:::demo
-
-```vue
-<template>
-  <nut-cell :isLink="true" desc-text-align="left" @click="showKeyBoard" :desc="value" title="双向绑定："></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" v-model="value" maxlength="6" @close="close"> </nut-number-keyboard>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const visible = ref(false);
-const value = ref('');
-const customKey = reactive(['.']);
-function showKeyBoard() {
-  visible.value = true;
-}
-function close() {
-  visible.value = false;
-}
-</script>
-```
-
-:::
+> demo: numberkeyboard value dentry
 
 ## API