From e54744315ff30b11a332bbf86d9ca1b603dab345 Mon Sep 17 00:00:00 2001
From: Marvin <63292605+yi-boide@users.noreply.github.com>
Date: Wed, 24 Jan 2024 17:10:33 +0800
Subject: [PATCH] chore(short-password): split demo (#2871)

---
 .../src/dentry/pages/shortpassword/basic.vue  |  12 ++
 .../src/dentry/pages/shortpassword/error.vue  |  27 ++++
 .../src/dentry/pages/shortpassword/forget.vue |  25 ++++
 .../src/dentry/pages/shortpassword/index.vue  | 123 ++++------------
 .../src/dentry/pages/shortpassword/length.vue |  22 +++
 src/packages/__VUE/shortpassword/demo.vue     | 139 ------------------
 .../__VUE/shortpassword/demo/basic.vue        |  12 ++
 .../__VUE/shortpassword/demo/error.vue        |  27 ++++
 .../__VUE/shortpassword/demo/forget.vue       |  25 ++++
 .../__VUE/shortpassword/demo/index.vue        |  37 +++++
 .../__VUE/shortpassword/demo/length.vue       |  22 +++
 src/packages/__VUE/shortpassword/doc.en-US.md | 133 +----------------
 src/packages/__VUE/shortpassword/doc.md       | 133 +----------------
 src/packages/__VUE/shortpassword/doc.taro.md  | 133 +----------------
 14 files changed, 248 insertions(+), 622 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/shortpassword/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/shortpassword/error.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/shortpassword/forget.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/shortpassword/length.vue
 delete mode 100644 src/packages/__VUE/shortpassword/demo.vue
 create mode 100644 src/packages/__VUE/shortpassword/demo/basic.vue
 create mode 100644 src/packages/__VUE/shortpassword/demo/error.vue
 create mode 100644 src/packages/__VUE/shortpassword/demo/forget.vue
 create mode 100644 src/packages/__VUE/shortpassword/demo/index.vue
 create mode 100644 src/packages/__VUE/shortpassword/demo/length.vue

diff --git a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/basic.vue
new file mode 100644
index 0000000000..6d935163ea
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/basic.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="Basic" is-link @click="visible = true"></nut-cell>
+  <nut-short-password v-model="value" v-model:visible="visible" @focus="showKeyboard = true"> </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/error.vue b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/error.vue
new file mode 100644
index 0000000000..37e0ad20ca
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/error.vue
@@ -0,0 +1,27 @@
+<template>
+  <nut-cell title="Error Message" is-link @click="visible = true"></nut-cell>
+  <nut-short-password
+    v-model="value"
+    v-model:visible="visible"
+    :error-msg="errorMsg"
+    @focus="showKeyboard = true"
+    @complete="complete"
+    @tips="onTips"
+  >
+  </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+const errorMsg = ref('请输入正确的密码');
+const complete = (value) => {
+  console.log(value);
+};
+const onTips = () => {
+  console.log('Click Tip');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/forget.vue b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/forget.vue
new file mode 100644
index 0000000000..ec7e63ca05
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/forget.vue
@@ -0,0 +1,25 @@
+<template>
+  <nut-cell title="Forget Password" is-link @click="visible = true"></nut-cell>
+  <nut-short-password
+    v-model="value"
+    v-model:visible="visible"
+    @focus="showKeyboard = true"
+    @complete="complete"
+    @tips="onTips"
+  >
+  </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+const complete = (value) => {
+  console.log(value);
+};
+const onTips = () => {
+  console.log('Click Tip');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue
index 92fd4e04d8..470e96163b 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue
@@ -1,106 +1,37 @@
 <template>
   <Demo>
-    <nut-cell title="基础用法" is-link @click="state.visible1 = true"></nut-cell>
-    <nut-short-password
-      v-model="state.value1"
-      v-model:visible="state.visible1"
-      @focus="state.showKeyboard1 = !state.showKeyboard1"
-      @close="state.showKeyboard1 = false"
-    >
-    </nut-short-password>
-    <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1"> </nut-number-keyboard>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-cell
-      title="自定义密码长度4"
-      is-link
-      @click="
-        state.visible2 = true;
-        state.length = 4;
-      "
-    ></nut-cell>
-    <nut-short-password
-      v-model="state.value2"
-      v-model:visible="state.visible2"
-      :length="state.length"
-      @focus="state.showKeyboard2 = !state.showKeyboard2"
-      @close="state.showKeyboard2 = false"
-      @complete="methods.complete"
-    >
-    </nut-short-password>
-    <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" maxlength="4">
-    </nut-number-keyboard>
-    <nut-cell
-      title="忘记密码提示语事件回调"
-      is-link
-      @click="
-        state.visible3 = true;
-        state.length = 6;
-        state.errorMsg = '';
-      "
-    ></nut-cell>
-    <nut-short-password
-      v-model="state.value3"
-      v-model:visible="state.visible3"
-      @focus="state.showKeyboard3 = !state.showKeyboard3"
-      @close="state.showKeyboard3 = false"
-      @tips="methods.onTips"
-    >
-    </nut-short-password>
-    <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3"> </nut-number-keyboard>
+    <h2>{{ t('length') }}</h2>
+    <Length />
 
-    <nut-cell
-      title="错误提示语"
-      is-link
-      @click="
-        state.visible4 = true;
-        state.length = 6;
-        state.errorMsg = '请输入正确密码';
-      "
-    ></nut-cell>
-    <nut-toast v-model:visible="state.show" msg="忘记密码" type="text" :cover="state.cover" />
-    <nut-short-password
-      v-model="state.value4"
-      v-model:visible="state.visible4"
-      :error-msg="state.errorMsg"
-      @focus="state.showKeyboard4 = !state.showKeyboard4"
-      @close="state.showKeyboard4 = false"
-      @tips="methods.onTips"
-    >
-    </nut-short-password>
-    <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4"> </nut-number-keyboard>
+    <h2>{{ t('forget') }}</h2>
+    <Forget />
+
+    <h2>{{ t('error') }}</h2>
+    <Error />
   </Demo>
 </template>
-
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Length from './length.vue';
+import Forget from './forget.vue';
+import Error from './error.vue';
 
-const state = reactive({
-  visible1: false,
-  visible2: false,
-  visible3: false,
-  visible4: false,
-  showKeyboard1: false,
-  showKeyboard2: false,
-  showKeyboard3: false,
-  showKeyboard4: false,
-  value1: '',
-  value2: '',
-  value3: '',
-  value4: '',
-  errorMsg: '',
-  length: 6,
-  show: false,
-  cover: false
-});
-const methods = {
-  complete(value) {
-    console.log(value);
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    length: '自定义密码长度',
+    forget: '忘记密码',
+    error: '错误提示语'
   },
-  onTips() {
-    state.show = true;
-    state.cover = false;
-  },
-  close() {},
-  cancel() {}
-};
+  'en-US': {
+    basic: 'Basic Usage',
+    length: 'Custom Password Length',
+    forget: 'Forget Password',
+    error: 'Error Message'
+  }
+});
 </script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/length.vue b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/length.vue
new file mode 100644
index 0000000000..02d28dc04d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/length.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-cell title="Length" is-link @click="visible = true"></nut-cell>
+  <nut-short-password
+    v-model="value"
+    v-model:visible="visible"
+    :length="4"
+    @focus="showKeyboard = true"
+    @complete="complete"
+  >
+  </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+const complete = (value) => {
+  console.log(value);
+};
+</script>
diff --git a/src/packages/__VUE/shortpassword/demo.vue b/src/packages/__VUE/shortpassword/demo.vue
deleted file mode 100644
index fbf2b4f101..0000000000
--- a/src/packages/__VUE/shortpassword/demo.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-  <div class="demo">
-    <nut-cell :title="translate('basic')" is-link @click="state.visible1 = true"></nut-cell>
-
-    <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
-    </nut-short-password>
-    <nut-number-keyboard
-      v-model="state.value1"
-      v-model:visible="state.showKeyboard1"
-      @blur="state.showKeyboard1 = false"
-    >
-    </nut-number-keyboard>
-
-    <nut-cell
-      :title="translate('customPasswordLength')"
-      is-link
-      @click="
-        state.visible2 = true;
-        state.length = 4;
-      "
-    ></nut-cell>
-    <nut-short-password
-      v-model="state.value2"
-      v-model:visible="state.visible2"
-      :length="state.length"
-      @focus="state.showKeyboard2 = true"
-      @complete="methods.complete"
-    >
-    </nut-short-password>
-    <nut-number-keyboard
-      v-model="state.value2"
-      v-model:visible="state.showKeyboard2"
-      @blur="state.showKeyboard2 = false"
-    >
-    </nut-number-keyboard>
-
-    <nut-cell :title="translate('forgetPassword')" is-link @click="state.visible3 = true"> </nut-cell>
-
-    <nut-short-password
-      v-model="state.value3"
-      v-model:visible="state.visible3"
-      @focus="state.showKeyboard3 = true"
-      @complete="methods.complete"
-      @tips="methods.onTips"
-    >
-    </nut-short-password>
-    <nut-number-keyboard
-      v-model="state.value3"
-      v-model:visible="state.showKeyboard3"
-      @blur="state.showKeyboard3 = false"
-    >
-    </nut-number-keyboard>
-
-    <nut-cell
-      :title="translate('errorMessage')"
-      is-link
-      @click="
-        state.visible4 = true;
-        state.errorMsg = translate('customErrorMsg');
-      "
-    ></nut-cell>
-    <nut-short-password
-      v-model="state.value4"
-      v-model:visible="state.visible4"
-      :error-msg="state.errorMsg"
-      @focus="state.showKeyboard4 = true"
-      @complete="methods.complete"
-      @tips="methods.onTips"
-    >
-    </nut-short-password>
-    <nut-number-keyboard
-      v-model="state.value4"
-      v-model:visible="state.showKeyboard4"
-      @blur="state.showKeyboard4 = false"
-    >
-    </nut-number-keyboard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    showButtonGroup: '显示按钮组',
-    customPasswordLength: '自定义密码长度',
-    forgetPassword: '忘记密码',
-    errorMessage: '错误提示语',
-    customErrorMsg: '请输入正确密码',
-    onTips: '执行密码忘记逻辑',
-    close: '点击icon关闭弹窗',
-    cancelTips: '点击取消按钮关闭弹窗'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    showButtonGroup: 'Show Button Group',
-    customPasswordLength: 'Custom Password Length',
-    forgetPassword: 'Forget Password',
-    errorMessage: 'Error Message',
-    customErrorMsg: 'Please enter correct password',
-    onTips: 'Execute forgotten password logic',
-    close: 'Click the icon to close the popup',
-    cancelTips: 'Click the Cancel button to close the popup'
-  }
-});
-
-const state = reactive({
-  visible1: false,
-  visible2: false,
-  visible3: false,
-  visible4: false,
-  showKeyboard1: false,
-  showKeyboard2: false,
-  showKeyboard3: false,
-  showKeyboard4: false,
-  value1: '',
-  value2: '',
-  value3: '',
-  value4: '',
-  errorMsg: '',
-  length: 6
-});
-const methods = {
-  complete(value: string) {
-    showToast.text(value);
-  },
-  onTips() {
-    showToast.text(translate('onTips'));
-  },
-  close() {
-    showToast.text(translate('close'));
-  },
-  cancel() {
-    showToast.text(translate('cancelTips'));
-  }
-};
-</script>
diff --git a/src/packages/__VUE/shortpassword/demo/basic.vue b/src/packages/__VUE/shortpassword/demo/basic.vue
new file mode 100644
index 0000000000..6d935163ea
--- /dev/null
+++ b/src/packages/__VUE/shortpassword/demo/basic.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="Basic" is-link @click="visible = true"></nut-cell>
+  <nut-short-password v-model="value" v-model:visible="visible" @focus="showKeyboard = true"> </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+</script>
diff --git a/src/packages/__VUE/shortpassword/demo/error.vue b/src/packages/__VUE/shortpassword/demo/error.vue
new file mode 100644
index 0000000000..37e0ad20ca
--- /dev/null
+++ b/src/packages/__VUE/shortpassword/demo/error.vue
@@ -0,0 +1,27 @@
+<template>
+  <nut-cell title="Error Message" is-link @click="visible = true"></nut-cell>
+  <nut-short-password
+    v-model="value"
+    v-model:visible="visible"
+    :error-msg="errorMsg"
+    @focus="showKeyboard = true"
+    @complete="complete"
+    @tips="onTips"
+  >
+  </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+const errorMsg = ref('请输入正确的密码');
+const complete = (value) => {
+  console.log(value);
+};
+const onTips = () => {
+  console.log('Click Tip');
+};
+</script>
diff --git a/src/packages/__VUE/shortpassword/demo/forget.vue b/src/packages/__VUE/shortpassword/demo/forget.vue
new file mode 100644
index 0000000000..ec7e63ca05
--- /dev/null
+++ b/src/packages/__VUE/shortpassword/demo/forget.vue
@@ -0,0 +1,25 @@
+<template>
+  <nut-cell title="Forget Password" is-link @click="visible = true"></nut-cell>
+  <nut-short-password
+    v-model="value"
+    v-model:visible="visible"
+    @focus="showKeyboard = true"
+    @complete="complete"
+    @tips="onTips"
+  >
+  </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+const complete = (value) => {
+  console.log(value);
+};
+const onTips = () => {
+  console.log('Click Tip');
+};
+</script>
diff --git a/src/packages/__VUE/shortpassword/demo/index.vue b/src/packages/__VUE/shortpassword/demo/index.vue
new file mode 100644
index 0000000000..d065ed2047
--- /dev/null
+++ b/src/packages/__VUE/shortpassword/demo/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('length') }}</h2>
+    <Length />
+
+    <h2>{{ t('forget') }}</h2>
+    <Forget />
+
+    <h2>{{ t('error') }}</h2>
+    <Error />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Length from './length.vue';
+import Forget from './forget.vue';
+import Error from './error.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    length: '自定义密码长度',
+    forget: '忘记密码',
+    error: '错误提示语'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    length: 'Custom Password Length',
+    forget: 'Forget Password',
+    error: 'Error Message'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/shortpassword/demo/length.vue b/src/packages/__VUE/shortpassword/demo/length.vue
new file mode 100644
index 0000000000..02d28dc04d
--- /dev/null
+++ b/src/packages/__VUE/shortpassword/demo/length.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-cell title="Length" is-link @click="visible = true"></nut-cell>
+  <nut-short-password
+    v-model="value"
+    v-model:visible="visible"
+    :length="4"
+    @focus="showKeyboard = true"
+    @complete="complete"
+  >
+  </nut-short-password>
+  <nut-number-keyboard v-model="value" v-model:visible="showKeyboard" @blur="showKeyboard = false">
+  </nut-number-keyboard>
+</template>
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const showKeyboard = ref(false);
+const value = ref('');
+const complete = (value) => {
+  console.log(value);
+};
+</script>
diff --git a/src/packages/__VUE/shortpassword/doc.en-US.md b/src/packages/__VUE/shortpassword/doc.en-US.md
index 2799ddf4d4..2b6fb82ae6 100644
--- a/src/packages/__VUE/shortpassword/doc.en-US.md
+++ b/src/packages/__VUE/shortpassword/doc.en-US.md
@@ -17,144 +17,19 @@ app.use(NumberKeyboard);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Basic Usage" is-link @click="state.visible1 = true"></nut-cell>
-  <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1" @blur="state.showKeyboard1 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  visible1: false,
-  showKeyboard1: false,
-  value1: ''
-});
-</script>
-```
-
-:::
+> demo: shortpassword basic
 
 ### Custom Password Length
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Custom Password Length" is-link @click="state.visible2 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value2"
-    v-model:visible="state.visible2"
-    @focus="state.showKeyboard2 = true"
-    :length="state.length"
-    @complete="methods.complete"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" @blur="state.showKeyboard2 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible2: false,
-  showKeyboard2: false,
-  value2: '',
-  length: 4
-});
-const methods = {
-  complete(value) {
-    showToast.text(value);
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword length
 
 ### Forget password
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Forget password" is-link @click="state.visible3 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value3"
-    v-model:visible="state.visible3"
-    @focus="state.showKeyboard3 = true"
-    @complete="methods.complete"
-    @tips="methods.onTips"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3" @blur="state.showKeyboard3 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible3: false,
-  showKeyboard3: false,
-  value3: ''
-});
-const methods = {
-  complete(value) {
-    showToast.text(value);
-  },
-  onTips() {
-    showToast.text('Execute forgotten password logic');
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword forget
 
 ### Error Message
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Error Message" is-link @click="state.visible4 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value4"
-    v-model:visible="state.visible4"
-    @focus="state.showKeyboard4 = true"
-    :error-msg="state.errorMsg"
-    @complete="methods.complete"
-    @tips="methods.onTips"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4" @blur="state.showKeyboard4 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible4: false,
-  showKeyboard4: false,
-  value4: '',
-  errorMsg: 'Please enter correct password'
-});
-const methods = {
-  complete(value) {
-    showToast.text(value);
-  },
-  onTips() {
-    showToast.text('Execute forgotten password logic');
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword error
 
 ## API
 
diff --git a/src/packages/__VUE/shortpassword/doc.md b/src/packages/__VUE/shortpassword/doc.md
index ea9a32ecbc..88fac59251 100644
--- a/src/packages/__VUE/shortpassword/doc.md
+++ b/src/packages/__VUE/shortpassword/doc.md
@@ -17,144 +17,19 @@ app.use(NumberKeyboard);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="基础用法" is-link @click="state.visible1 = true"></nut-cell>
-  <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1" @blur="state.showKeyboard1 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  visible1: false,
-  showKeyboard1: false,
-  value1: ''
-});
-</script>
-```
-
-:::
+> demo: shortpassword basic
 
 ### 自定义密码长度 4
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="自定义密码长度4" is-link @click="state.visible2 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value2"
-    v-model:visible="state.visible2"
-    @focus="state.showKeyboard2 = true"
-    :length="state.length"
-    @complete="methods.complete"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" @blur="state.showKeyboard2 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible2: false,
-  showKeyboard2: false,
-  value2: '',
-  length: 4
-});
-const methods = {
-  complete(value) {
-    showToast.text(value);
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword length
 
 ### 忘记密码提示语事件回调
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="忘记密码提示语" is-link @click="state.visible3 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value3"
-    v-model:visible="state.visible3"
-    @focus="state.showKeyboard3 = true"
-    @complete="methods.complete"
-    @tips="methods.onTips"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3" @blur="state.showKeyboard3 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible3: false,
-  showKeyboard3: false,
-  value3: ''
-});
-const methods = {
-  complete(value) {
-    showToast.text(value);
-  },
-  onTips() {
-    showToast.text('执行忘记密码逻辑');
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword forget
 
 ### 错误提示语
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="错误提示语" is-link @click="state.visible4 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value4"
-    v-model:visible="state.visible4"
-    @focus="state.showKeyboard4 = true"
-    :error-msg="state.errorMsg"
-    @complete="methods.complete"
-    @tips="methods.onTips"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4" @blur="state.showKeyboard4 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible4: false,
-  showKeyboard4: false,
-  value4: '',
-  errorMsg: '请输入正确密码'
-});
-const methods = {
-  complete(value) {
-    showToast.text(value);
-  },
-  onTips() {
-    showToast.text('执行忘记密码逻辑');
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword error
 
 ## API
 
diff --git a/src/packages/__VUE/shortpassword/doc.taro.md b/src/packages/__VUE/shortpassword/doc.taro.md
index 61479a0237..b8f28fbe1a 100644
--- a/src/packages/__VUE/shortpassword/doc.taro.md
+++ b/src/packages/__VUE/shortpassword/doc.taro.md
@@ -17,144 +17,19 @@ app.use(NumberKeyboard);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="基础用法" is-link @click="state.visible1 = true"></nut-cell>
-  <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1" @blur="state.showKeyboard1 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  visible1: false,
-  showKeyboard1: false,
-  value1: ''
-});
-</script>
-```
-
-:::
+> demo: shortpassword basic dentry
 
 ### 自定义密码长度 4
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="自定义密码长度4" is-link @click="state.visible2 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value2"
-    v-model:visible="state.visible2"
-    @focus="state.showKeyboard2 = true"
-    :length="state.length"
-    @complete="methods.complete"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" @blur="state.showKeyboard2 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible2: false,
-  showKeyboard2: false,
-  value2: '',
-  length: 4
-});
-const methods = {
-  complete(value) {
-    console.log(value);
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword length dentry
 
 ### 忘记密码提示语事件回调
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="忘记密码提示语" is-link @click="state.visible3 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value3"
-    v-model:visible="state.visible3"
-    @focus="state.showKeyboard3 = true"
-    @complete="methods.complete"
-    @tips="methods.onTips"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3" @blur="state.showKeyboard3 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible3: false,
-  showKeyboard3: false,
-  value3: ''
-});
-const methods = {
-  complete(value) {
-    console.log(value);
-  },
-  onTips() {
-    console.log('执行忘记密码逻辑');
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword forget dentry
 
 ### 错误提示语
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="错误提示语" is-link @click="state.visible4 = true"></nut-cell>
-  <nut-short-password
-    v-model="state.value4"
-    v-model:visible="state.visible4"
-    @focus="state.showKeyboard4 = true"
-    :error-msg="state.errorMsg"
-    @complete="methods.complete"
-    @tips="methods.onTips"
-  >
-  </nut-short-password>
-  <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4" @blur="state.showKeyboard4 = false">
-  </nut-number-keyboard>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-const state = reactive({
-  visible4: false,
-  showKeyboard4: false,
-  value4: '',
-  errorMsg: '请输入正确密码'
-});
-const methods = {
-  complete(value) {
-    console.log(value);
-  },
-  onTips() {
-    console.log('执行忘记密码逻辑');
-  }
-};
-</script>
-```
-
-:::
+> demo: shortpassword error dentry
 
 ## API