Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

src/packages/__VUE/inputnumber/demo.vue

@@ -50,6 +50,7 @@
 import { reactive, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Left, Right } from '@nutui/icons-vue';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('input-number');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -86,7 +87,6 @@ export default createDemo({
   props: {},
   setup() {
     initTranslate();
-    let { proxy } = getCurrentInstance();
 
     const state = reactive({
       val1: 1,
@@ -102,15 +102,15 @@ export default createDemo({
     });
 
     const onChange = (value: number) => {
-      proxy.$toast.loading(translate('content1'));
+      showToast.loading(translate('content1'));
       setTimeout(() => {
         state.val8 = value;
-        proxy.$toast.hide();
+        showToast.hide();
       }, 2000);
     };
 
     const overlimit = () => {
-      proxy.$toast.warn(translate('content2'));
+      showToast.warn(translate('content2'));
     };
 
     return {

src/packages/__VUE/inputnumber/doc.en-US.md

@@ -164,6 +164,8 @@ Asynchronous modification through `change` event and `model-value`
 </template>
 <script lang="ts">
   import { reactive, getCurrentInstance, toRefs } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup() {
       let { proxy } = getCurrentInstance();
@@ -171,10 +173,10 @@ Asynchronous modification through `change` event and `model-value`
         value: 1
       });
       const onChange = (value: number) => {
-        proxy.$toast.loading('Asynchronous presentation changes in 2 seconds');
+        showToast.loading('Asynchronous presentation changes in 2 seconds');
         setTimeout(() => {
           state.value = value;
-          proxy.$toast.hide();
+          showToast.hide();
         }, 2000);
       };
       return { ...toRefs(state), onChange };

src/packages/__VUE/inputnumber/doc.md

@@ -164,6 +164,8 @@ app.use(InputNumber);
 </template>
 <script lang="ts">
   import { reactive, getCurrentInstance, toRefs } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup() {
       let { proxy } = getCurrentInstance();
@@ -171,10 +173,10 @@ app.use(InputNumber);
         value: 1
       });
       const onChange = (value: number) => {
-        proxy.$toast.loading('异步演示 2 秒后更改');
+        showToast.loading('异步演示 2 秒后更改');
         setTimeout(() => {
           state.value = value;
-          proxy.$toast.hide();
+          showToast.hide();
         }, 2000);
       };
       return { ...toRefs(state), onChange };

src/packages/__VUE/inputnumber/doc.taro.md

@@ -166,15 +166,13 @@ app.use(InputNumber);
   import { reactive, getCurrentInstance, toRefs } from 'vue';
   export default {
     setup() {
-      let { proxy } = getCurrentInstance();
       const state = reactive({
         value: 1
       });
       const onChange = (value: number) => {
-        proxy.$toast.loading('异步演示 2 秒后更改');
+        console.log('异步演示 2 秒后更改');
         setTimeout(() => {
-          state.value = value;
-          proxy.$toast.hide();
+          state.val8 = value;
         }, 2000);
       };
       return { ...toRefs(state), onChange };

src/packages/__VUE/numberkeyboard/demo.vue

@@ -82,6 +82,7 @@
 <script lang="ts">
 import { ref, getCurrentInstance, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('number-keyboard');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -111,7 +112,6 @@ export default createDemo({
   props: {},
   setup() {
     initTranslate();
-    let { proxy } = getCurrentInstance() as any;
     const visible1 = ref(false);
     const visible2 = ref(false);
     const visible3 = ref(false);
@@ -124,13 +124,13 @@ export default createDemo({
     const customKey3 = reactive(['X']);
     const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
     function input(number: any) {
-      proxy.$toast.text(`输入：${number}`);
+      showToast.text(`输入：${number}`);
     }
     function showKeyBoard(index: number) {
       visibleArr[index - 1].value = true;
     }
     function onDelete() {
-      proxy.$toast.text('删除');
+      showToast.text('删除');
     }
     function close(index: number) {
       console.log('关闭');

src/packages/__VUE/numberkeyboard/doc.en-US.md

@@ -26,7 +26,8 @@ For online debugging, please change the browser to mobile mode
 </template>
 <script>
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -34,10 +35,10 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`enter：${number}`);
+      showToast.text(`enter：${number}`);
     }
     function onDelete() {
-      Toast.text('delete');
+      showToast.text('delete');
     }
     function close() {
       visible.value = false;
@@ -73,7 +74,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -82,7 +84,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`enter${number}`);
+      showToast.text(`enter${number}`);
     }
     function close() {
       visible.value = false;
@@ -119,7 +121,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -128,7 +131,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`enter：${number}`);
+      showToast.text(`enter：${number}`);
     }
     function close() {
       visible.value = false;
@@ -162,7 +165,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -171,7 +175,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`enter：${number}`);
+      showToast.text(`enter：${number}`);
     }
     function close() {
       visible.value = false;
@@ -204,7 +208,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -213,7 +218,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`enter：${number}`);
+      showToast.text(`enter：${number}`);
     }
     function close() {
       visible.value = false;
@@ -253,7 +258,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);

src/packages/__VUE/numberkeyboard/doc.md

@@ -26,7 +26,8 @@ app.use(NumberKeyboard);
 </template>
 <script>
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -34,10 +35,10 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      showToast.text(`输入：${number}`);
     }
     function onDelete() {
-      Toast.text('删除');
+      showToast.text('删除');
     }
     function close() {
       visible.value = false;
@@ -73,7 +74,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -82,7 +84,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      showToast.text(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -119,7 +121,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -128,14 +131,14 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      showToast.text(`输入：${number}`);
     }
     function close() {
       visible.value = false;
     }
     return {
       visible,
-    customKey,
+      customKey,
       input,
       showKeyBoard,
       close,
@@ -162,7 +165,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -171,7 +175,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      showToast.text(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -204,7 +208,8 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const visible = ref(false);
@@ -213,7 +218,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      showToast.text(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -253,7 +258,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);

src/packages/__VUE/numberkeyboard/doc.taro.md

@@ -26,7 +26,6 @@ app.use(NumberKeyboard);
 </template>
 <script>
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);
@@ -34,10 +33,10 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      console.log(`输入：${number}`);
     }
     function onDelete() {
-      Toast.text('删除');
+      console.log('删除');
     }
     function close() {
       visible.value = false;
@@ -73,7 +72,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);
@@ -82,7 +80,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      console.log(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -119,7 +117,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);
@@ -128,7 +125,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      console.log(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -162,7 +159,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);
@@ -171,7 +167,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      console.log(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -204,7 +200,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);
@@ -213,7 +208,7 @@ export default{
       visible.value = true;
     }
     function input(number) {
-      Toast.text(`输入：${number}`);
+      console.log(`输入：${number}`);
     }
     function close() {
       visible.value = false;
@@ -253,7 +248,6 @@ export default{
 </template>
 <script>
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const visible = ref(false);

src/packages/__VUE/shortpassword/demo.vue

@@ -78,8 +78,9 @@
 </template>
 
 <script lang="ts">
-import { reactive, getCurrentInstance } from 'vue';
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('short-password');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -110,7 +111,6 @@ const initTranslate = () =>
 export default createDemo({
   setup() {
     initTranslate();
-    let { proxy } = getCurrentInstance() as any;
 
     const state = reactive({
       visible1: false,
@@ -130,16 +130,16 @@ export default createDemo({
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
       onTips() {
-        proxy.$toast.text(translate('onTips'));
+        showToast.text(translate('onTips'));
       },
       close() {
-        proxy.$toast.text(translate('close'));
+        showToast.text(translate('close'));
       },
       cancel() {
-        proxy.$toast.text(translate('cancelTips'));
+        showToast.text(translate('cancelTips'));
       }
     };
 

src/packages/__VUE/shortpassword/doc.en-US.md

@@ -7,11 +7,11 @@ Short password input box, which can be used to enter passwords, SMS verification
 
 ``` javascript
 import { createApp } from 'vue';
-import { ShortPassword } from '@nutui/nutui';
+import { ShortPassword, NumberKeyboard } from '@nutui/nutui';
 
 const app = createApp();
 app.use(ShortPassword);
-
+app.use(NumberKeyboard);
 ```
 
 
@@ -19,22 +19,21 @@ app.use(ShortPassword);
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const state = reactive({
@@ -55,25 +54,26 @@ export default{
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const state = reactive({
@@ -84,7 +84,7 @@ export default{
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
     };
     return {
@@ -102,25 +102,26 @@ export default{
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const state = reactive({
@@ -130,10 +131,10 @@ export default{
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
       onTips() {
-        Toast.text('Execute forgotten password logic');
+        showToast.text('Execute forgotten password logic');
       },
     };
     return {
@@ -150,26 +151,27 @@ export default{
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const state = reactive({
@@ -180,10 +182,10 @@ export default{
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
       onTips() {
-        Toast.text('Execute forgotten password logic');
+        showToast.text('Execute forgotten password logic');
       },
     };
     return {

src/packages/__VUE/shortpassword/doc.md

@@ -7,11 +7,11 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { ShortPassword } from '@nutui/nutui';
+import { ShortPassword, NumberKeyboard } from '@nutui/nutui';
 
 const app = createApp();
 app.use(ShortPassword);
-
+app.use(NumberKeyboard);
 ```
 
 
@@ -19,22 +19,21 @@ app.use(ShortPassword);
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const state = reactive({
@@ -56,25 +55,26 @@ export default{
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const state = reactive({
@@ -85,7 +85,7 @@ export default{
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
     };
     return {
@@ -103,25 +103,26 @@ export default{
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const state = reactive({
@@ -131,10 +132,10 @@ export default{
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
       onTips() {
-        Toast.text('执行忘记密码逻辑');
+        showToast.text('执行忘记密码逻辑');
       },
     };
     return {
@@ -151,26 +152,27 @@ export default{
 :::demo
 ```html
 <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>
+  <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>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default{
   setup() {
     const state = reactive({
@@ -181,10 +183,10 @@ export default{
     });
     const methods = {
       complete(value: string) {
-        proxy.$toast.text(value);
+        showToast.text(value);
       },
       onTips() {
-        Toast.text('执行忘记密码逻辑');
+        showToast.text('执行忘记密码逻辑');
       },
     };
     return {

src/packages/__VUE/shortpassword/doc.taro.md

@@ -7,12 +7,11 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { ShortPassword,NumberKeyboard } from '@nutui/nutui-taro';
+import { ShortPassword, NumberKeyboard } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(ShortPassword);
 app.use(NumberKeyboard);
-
 ```
 
 
@@ -20,19 +19,19 @@ app.use(NumberKeyboard);
 :::demo
 ```html
 <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=!state.showKeyboard1"
-      @close="state.showKeyboard1=false"
-    >
-    </nut-short-password>
-    <nut-number-keyboard 
-      v-model="state.value1"
-      v-model:visible="state.showKeyboard1" 
-    >
-    </nut-number-keyboard>
+  <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>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -58,28 +57,28 @@ export default{
 :::demo
 ```html
 <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"
-      :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="自定义密码长度4"
+    is-link
+    @click="
+      state.visible2 = true;
+    "
+  ></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>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -111,26 +110,26 @@ export default{
 :::demo
 ```html
 <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=!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>
+  <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=!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>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -160,31 +159,30 @@ export default{
 :::demo
 ```html
 <template>
-    <nut-cell
-      title="错误提示语"
-      is-link
-      @click="
-        state.visible4 = true;
-      "
-    ></nut-cell>
-    <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>
+  <nut-cell
+    title="错误提示语"
+    is-link
+    @click="
+      state.visible4 = true;
+    "
+  ></nut-cell>
+  <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>
 </template>
 <script>
 import { reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default{
   setup() {
     const state = reactive({
@@ -195,7 +193,7 @@ export default{
     });
     const methods = {
       onTips() {
-        Toast.text('执行忘记密码逻辑');
+        console.log('执行忘记密码逻辑');
       },
     };
     return {