docs(shortpassword): toast usage update

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 {