docs: toast usage update

src/packages/__VUE/icon/demo.vue

@@ -82,7 +82,7 @@ const initTranslate = () =>
   });
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('icon');
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import { Add, IconFontConfig, IconFont } from '@nutui/icons-vue';
 export default createDemo({
   props: {},
@@ -98,7 +98,7 @@ export default createDemo({
       input.select();
       if (document.execCommand('copy')) {
         document.execCommand('copy');
-        Toast.text(`${translate('copyToast')}: <br/>${displayText}`);
+        showToast.text(`${translate('copyToast')}: <br/>${displayText}`);
       }
       document.body.removeChild(input);
     };

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

@@ -72,7 +72,6 @@ Scrolling to the bottom of the list automatically loads more data.
 
 <script>
   import { ref,reactive,onMounted,toRefs} from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       let cycle = 0;

src/packages/__VUE/infiniteloading/doc.md

@@ -73,7 +73,6 @@
 
 <script>
   import { ref,reactive,onMounted,toRefs} from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       let cycle = 0;

src/packages/__VUE/invoice/demo.vue

@@ -10,7 +10,7 @@ import { ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('invoice');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 
 const initTranslate = () =>
   useTranslate({
@@ -39,9 +39,9 @@ export default createDemo({
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading('模拟异步验证中...');
+        showToast.loading('模拟异步验证中...');
         setTimeout(() => {
-          Toast.hide();
+          showToast.hide();
           resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
         }, 1000);
       });

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

@@ -28,15 +28,17 @@ app.use(Invoice);
   </nut-invoice>
 </template>
 <script lang="ts">
-import { ref,reactive } from 'vue';
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup(){
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading('模拟异步验证中...');
+        showToast.loading('模拟异步验证中...');
         setTimeout(() => {
-          Toast.hide();
+          showToast.hide();
           resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
         }, 1000);
       });

src/packages/__VUE/invoice/doc.md

@@ -28,14 +28,16 @@ app.use(Invoice);
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup(){
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading('模拟异步验证中...');
+        showToast.loading('模拟异步验证中...');
         setTimeout(() => {
-          Toast.hide();
+          showToast.hide();
           resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
         }, 1000);
       });

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

@@ -33,9 +33,9 @@ export default {
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading('模拟异步验证中...');
+        console.log('模拟异步验证中...');
         setTimeout(() => {
-          Toast.hide();
+          console.log('验证完成');
           resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
         }, 1000);
       });

src/packages/__VUE/picker/demo.vue

@@ -59,7 +59,7 @@ import { PickerOption } from './types';
 const { createDemo, translate } = createComponent('picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Internation } from './doc.en';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 
 useTranslate(Internation);
 export default createDemo({
@@ -178,7 +178,7 @@ export default createDemo({
     });
 
     const confirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
-      Toast.text(selectedOptions.map((val: any) => val.text).join(','));
+      showToast.text(selectedOptions.map((val: any) => val.text).join(','));
     };
 
     const popupConfirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {

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

@@ -24,7 +24,8 @@ app.use(Picker);
 </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(props) {
       const columns = ref([
@@ -38,7 +39,7 @@ app.use(Picker);
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns, confirm};
@@ -69,7 +70,8 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
 </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(props) {
       const show = ref(false)
@@ -114,6 +116,8 @@ The default selection is implemented by setting `modelValue`, which is an array
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -128,7 +132,7 @@ The default selection is implemented by setting `modelValue`, which is an array
       ]);
     
        const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns,selectedValue, confirm};
@@ -156,6 +160,8 @@ The default selection is implemented by setting `modelValue`, which is an array
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -170,7 +176,7 @@ The default selection is implemented by setting `modelValue`, which is an array
       ]);
     
        const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns,selectedValue, confirm};
@@ -198,6 +204,8 @@ The default selection is implemented by setting `modelValue`, which is an array
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
        const selectedTime = ref(['Wednesday','Afternoon']);
@@ -219,7 +227,7 @@ The default selection is implemented by setting `modelValue`, which is an array
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
       const change = ({ selectedValue,selectedOptions }) => {
         console.log(selectedValue);
@@ -250,6 +258,8 @@ Use the children field of the Columns attribute to cascade options
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedCascader = ref(['FuJian', 'FuZhou','TaiJiang']);
@@ -301,7 +311,7 @@ Use the children field of the Columns attribute to cascade options
       ]);
     
        const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
      
 
@@ -328,6 +338,8 @@ Use the children field of the Columns attribute to cascade options
 </template>
 <script>
   import { ref, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const asyncColumns = ref([]);
@@ -351,7 +363,7 @@ Use the children field of the Columns attribute to cascade options
       });
       
       const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {asyncColumns,asyncValue, confirm};

src/packages/__VUE/picker/doc.md

@@ -23,7 +23,8 @@ app.use(Picker);
 </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(props) {
       const columns = ref([
@@ -37,7 +38,7 @@ app.use(Picker);
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns, confirm};
@@ -68,7 +69,8 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </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(props) {
       const show = ref(false)
@@ -113,6 +115,8 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -127,7 +131,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns,selectedValue, confirm};
@@ -155,6 +159,8 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -169,7 +175,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return { columns,selectedValue, confirm};
@@ -197,6 +203,8 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedTime = ref(['Wednesday','Afternoon']);
@@ -218,7 +226,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
       const change = ({ selectedValue,selectedOptions }) => {
         console.log(selectedValue);
@@ -247,6 +255,8 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const selectedCascader = ref(['FuJian', 'FuZhou','TaiJiang']);
@@ -298,7 +308,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
      
 
@@ -325,6 +335,8 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script>
   import { ref, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style'; 
   export default {
     setup(props) {
       const asyncColumns = ref([]);
@@ -347,7 +359,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       });
       
       const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         showToast.text(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {asyncColumns,asyncValue, confirm};

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

@@ -23,7 +23,6 @@ app.use(Picker);
 </template>
 <script>
   import { ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       const columns = ref([
@@ -37,7 +36,7 @@ app.use(Picker);
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        console.log(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns, confirm};
@@ -68,7 +67,6 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script>
   import { ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       const show = ref(false)
@@ -127,7 +125,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        console.log(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {columns,selectedValue, confirm};
@@ -169,7 +167,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        console.log(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return { columns,selectedValue, confirm};
@@ -218,7 +216,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+        console.log(selectedOptions.map((val: any) => val.text).join(','))
       }
       const change = ({ selectedValue,selectedOptions }) => {
         console.log(selectedValue);
@@ -298,7 +296,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         console.log(selectedOptions.map((val: any) => val.text).join(','))
       }
      
 
@@ -347,7 +345,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       });
       
       const confirm = ( { selectedValue,selectedOptions })=>{
-         Toast.text(selectedOptions.map((val: any) => val.text).join(','))
+         console.log(selectedOptions.map((val: any) => val.text).join(','))
       }
 
       return {asyncColumns,asyncValue, confirm};

src/packages/__VUE/pullrefresh/demo.vue

@@ -39,7 +39,7 @@ import { createComponent } from '@/packages/utils/create';
 
 const { createDemo, translate } = createComponent('pullrefresh');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 
 const initTranslate = () =>
   useTranslate({
@@ -116,7 +116,7 @@ export default createDemo({
         refresh.value = false;
         refresh2.value = false;
 
-        Toast.text('刷新成功！');
+        showToast.text('刷新成功！');
       }, 3000);
     };
 

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

@@ -69,7 +69,6 @@ The pull-down refresh has four states:`'loading' | 'loosing' | 'pulling' | 'comp
 
 <script>
   import { ref,reactive,onMounted,toRefs} from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       const refresh2 = ref(false);

src/packages/__VUE/pullrefresh/doc.md

@@ -68,7 +68,6 @@ app.use(PullRefresh);
 
 <script>
   import { ref,reactive,onMounted,toRefs} from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup(props) {
       const refresh2 = ref(false);

src/packages/__VUE/range/demo.vue

@@ -85,7 +85,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('range');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
@@ -148,7 +148,7 @@ export default createDemo({
       }
     });
 
-    const onChange = (value: number) => Toast.text('value：' + value);
+    const onChange = (value: number) => showToast.text('value：' + value);
     return {
       ...toRefs(state),
       onChange,

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

@@ -26,11 +26,12 @@ app.use(Range);
 
 <script lang="ts">
   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 value = ref(40);
-      const onChange = (value) => Toast.text('value：' + value);
+      const onChange = (value) => showToast.text('value：' + value);
       return {
         value,
         onChange,
@@ -53,11 +54,12 @@ app.use(Range);
 
 <script lang="ts">
 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 value = ref([20, 80]);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -78,11 +80,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(0);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -103,11 +106,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(20);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -128,11 +132,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(30);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -153,11 +158,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(40);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -179,11 +185,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(50);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -210,11 +217,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(40);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -251,11 +259,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(60);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -291,12 +300,13 @@ export default {
 
 <script lang="ts">
 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 value10 = ref(20);
     const value11 = ref([20,80]);
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,
@@ -347,7 +357,8 @@ export default {
 
 <script lang="ts">
 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 value12 = ref(20);
@@ -360,7 +371,7 @@ export default {
       80: 80,
       100: 100
     });
-    const onChange = (value) => Toast.text('value：' + value);
+    const onChange = (value) => showToast.text('value：' + value);
     return {
       value,
       onChange,

src/packages/__VUE/range/doc.md

@@ -27,11 +27,12 @@ app.use(Range);
 
 <script lang="ts">
   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 value = ref(40);
-      const onChange = (value) => Toast.text('当前值：' + value);
+      const onChange = (value) => showToast.text('当前值：' + value);
       return {
         value,
         onChange,
@@ -54,11 +55,12 @@ app.use(Range);
 
 <script lang="ts">
 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 value = ref([20, 80]);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -79,11 +81,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(0);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -104,11 +107,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(20);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -129,11 +133,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(30);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -154,11 +159,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(40);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -180,11 +186,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(50);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -211,11 +218,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(40);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -253,11 +261,12 @@ export default {
 
 <script lang="ts">
 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 value = ref(60);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -294,12 +303,13 @@ export default {
 
 <script lang="ts">
 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 value10 = ref(20);
     const value11 = ref([20,80]);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,
@@ -349,7 +359,8 @@ export default {
 
 <script lang="ts">
 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 value12 = ref(20);
@@ -362,7 +373,7 @@ export default {
       80: 80,
       100: 100
     });
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => showToast.text('当前值：' + value);
     return {
       value,
       onChange,

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

@@ -27,11 +27,10 @@ app.use(Range);
 
 <script lang="ts">
   import { ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup() {
       const value = ref(40);
-      const onChange = (value) => Toast.text('当前值：' + value);
+      const onChange = (value) => console.log('当前值：' + value);
       return {
         value,
         onChange,
@@ -54,11 +53,10 @@ app.use(Range);
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref([20, 80]);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -79,11 +77,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(0);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -104,11 +101,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(20);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -129,11 +125,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(30);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -154,11 +149,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(40);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -180,11 +174,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(50);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -211,11 +204,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(40);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -253,11 +245,10 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value = ref(60);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -294,12 +285,11 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value10 = ref(20);
     const value11 = ref([20,80]);
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,
@@ -349,7 +339,6 @@ export default {
 
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     const value12 = ref(20);
@@ -362,7 +351,7 @@ export default {
       80: 80,
       100: 100
     });
-    const onChange = (value) => Toast.text('当前值：' + value);
+    const onChange = (value) => console.log('当前值：' + value);
     return {
       value,
       onChange,

src/packages/__VUE/rate/demo.vue

@@ -29,7 +29,7 @@ import { HeartFill, StarFillN } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const { createDemo, translate } = createComponent('rate');
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -71,7 +71,7 @@ export default createDemo({
       val8: 3
     });
     const onChange = (val: string) => {
-      Toast.text(val);
+      showToast.text(val);
     };
     return {
       state,

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

@@ -137,12 +137,13 @@ export default {
 </template>
 <script lang="ts">
 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 value = ref(3);
         const onChange = (val)=>{
-            Toast.text(val);
+            showToast.text(val);
         }
     return { value,onChange }
     }

src/packages/__VUE/rate/doc.md

@@ -138,12 +138,13 @@ export default {
 </template>
 <script lang="ts">
 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 value = ref(3);
         const onChange = (val)=>{
-            Toast.text(val);
+            showToast.text(val);
         }
     return { value,onChange }
     }

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

@@ -156,12 +156,11 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
     setup() {
         const value = ref(3);
         const onChange = (val)=>{
-            Toast.text(val);
+            console.log(val);
         }
     return { value,onChange }
     }
@@ -179,7 +178,6 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
     setup() {
         const value = ref(3);

src/packages/__VUE/searchbar/demo.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('searchbar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -103,11 +103,11 @@ export default createDemo({
     });
 
     const search = function () {
-      Toast.text('搜索触发');
+      showToast.text('搜索触发');
     };
 
     const clickLeft = function () {
-      Toast.text('点击回退按钮');
+      showToast.text('点击回退按钮');
     };
     const clickLeftIcon = function (a: string, b: Event) {
       console.log(a, b);

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

@@ -44,7 +44,8 @@ app.use(Searchbar);
 </template>
 <script lang="ts">
   import { toRefs, 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({
@@ -52,7 +53,7 @@ app.use(Searchbar);
       });
 
       const search = function () {
-        Toast.text('Search trigger');
+        showToast.text('Search trigger');
       };
 
       return {

src/packages/__VUE/searchbar/doc.md

@@ -45,7 +45,8 @@ app.use(Searchbar);
 </template>
 <script lang="ts">
   import { toRefs, 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({
@@ -53,7 +54,7 @@ app.use(Searchbar);
       });
 
       const search = function () {
-        Toast.text('搜索触发');
+        showToast.text('搜索触发');
       };
 
       return {

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

@@ -45,7 +45,6 @@ app.use(Searchbar);
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup() {
       const state = reactive({
@@ -53,7 +52,7 @@ app.use(Searchbar);
       });
 
       const search = function () {
-        Toast.text('搜索触发');
+        console.log('搜索触发');
       };
 
       return {

src/packages/__VUE/sidenavbar/demo.vue

@@ -81,7 +81,7 @@
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('side-navbar');
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
@@ -171,7 +171,7 @@ export default createDemo({
     };
 
     const handleClick4 = (msg: string) => {
-      Toast.text(msg);
+      showToast.text(msg);
     };
 
     return {

src/packages/__VUE/sku/demo.vue

@@ -110,7 +110,7 @@ import { reactive, ref, toRefs, onMounted } from 'vue';
 
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('sku');
 
 const initTranslate = () =>
@@ -264,9 +264,9 @@ export default createDemo({
     // stepper 极限值
     const overLimit = (val: any) => {
       if (val.action == 'reduce') {
-        Toast.text(`至少买${val.value}件哦`);
+        showToast.text(`至少买${val.value}件哦`);
       } else {
-        Toast.text(`最多买${val.value}件哦`);
+        showToast.text(`最多买${val.value}件哦`);
       }
     };
 

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

@@ -191,6 +191,8 @@ You can configure the maximum value and minimum value of the digital input box a
 </template>
 <script lang="ts">
 import { ref,reactive,onMounted,toRefs} from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style'; 
 export default {
 setup() {
     const customStepper = ref(false);
@@ -221,9 +223,9 @@ setup() {
     // inputNumber 极限值
     const overLimit = (val: any) => {
       if (val.action == 'reduce') {
-        Toast.text(`至少买${val.value}件哦`);
+        showToast.text(`至少买${val.value}件哦`);
       } else {
-        Toast.text(`最多买${val.value}件哦`);
+        showToast.text(`最多买${val.value}件哦`);
       }
     };
     // 切换规格类目

src/packages/__VUE/sku/doc.md

@@ -190,6 +190,8 @@ setup() {
 </template>
 <script lang="ts">
 import { ref,reactive,onMounted,toRefs} from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style'; 
 export default {
 setup() {
     const customStepper = ref(false);
@@ -220,9 +222,9 @@ setup() {
     // inputNumber 极限值
     const overLimit = (val: any) => {
       if (val.action == 'reduce') {
-        Toast.text(`至少买${val.value}件哦`);
+        showToast.text(`至少买${val.value}件哦`);
       } else {
-        Toast.text(`最多买${val.value}件哦`);
+        showToast.text(`最多买${val.value}件哦`);
       }
     };
     // 切换规格类目

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

@@ -220,9 +220,9 @@ setup() {
     // inputNumber 极限值
     const overLimit = (val: any) => {
       if (val.action == 'reduce') {
-        Toast.text(`至少买${val.value}件哦`);
+        console.log(`至少买${val.value}件哦`);
       } else {
-        Toast.text(`最多买${val.value}件哦`);
+        console.log(`最多买${val.value}件哦`);
       }
     };
     // 切换规格类目

src/packages/__VUE/table/demo.vue

@@ -29,7 +29,7 @@
 import { reactive, toRefs, onMounted, onUnmounted, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { TableColumnProps } from './types';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import Button from '@/packages/__VUE/button/index.vue';
 import { Dongdong } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('table');
@@ -260,7 +260,7 @@ export default createDemo({
               Button,
               {
                 onClick: () => {
-                  (Toast as any).text('hello');
+                  (showToast as any).text('hello');
                 },
                 size: 'small',
                 type: 'primary'
@@ -327,7 +327,7 @@ export default createDemo({
     });
 
     const handleSorter = (item: TableColumnProps) => {
-      (Toast as any).text(`${JSON.stringify(item)}`);
+      (showToast as any).text(`${JSON.stringify(item)}`);
     };
 
     onMounted(() => {

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

@@ -407,7 +407,7 @@ app.use(Table);
                 Button,
                 {
                   onClick: () => {
-                    (Toast as any).text('hello');
+                    showToast.text('hello');
                   },
                   size: 'small',
                   type: 'primary'
@@ -541,7 +541,8 @@ app.use(Table);
 </template>
 <script lang="ts">
   import { reactive, toRefs } 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({
@@ -591,7 +592,7 @@ app.use(Table);
       });
 
       const handleSorter = (item: TableColumnProps) => {
-        (Toast as any).text(`${JSON.stringify(item)}`);
+        showToast.text(`${JSON.stringify(item)}`);
       };
 
       return {

src/packages/__VUE/table/doc.md

@@ -407,7 +407,7 @@ app.use(Table);
                 Button,
                 {
                   onClick: () => {
-                    (Toast as any).text('hello');
+                    showToast.text('hello');
                   },
                   size: 'small',
                   type: 'primary'
@@ -541,7 +541,8 @@ app.use(Table);
 </template>
 <script lang="ts">
   import { reactive, toRefs } 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({
@@ -591,7 +592,7 @@ app.use(Table);
       });
 
       const handleSorter = (item: TableColumnProps) => {
-        (Toast as any).text(`${JSON.stringify(item)}`);
+        showToast.text(`${JSON.stringify(item)}`);
       };
 
       return {

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

@@ -407,7 +407,7 @@ app.use(Table);
                 Button,
                 {
                   onClick: () => {
-                    (Toast as any).text('hello');
+                    console.log('hello');
                   },
                   size: 'small',
                   type: 'primary'
@@ -541,7 +541,6 @@ app.use(Table);
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     setup() {
       const state = reactive({
@@ -591,7 +590,7 @@ app.use(Table);
       });
 
       const handleSorter = (item: TableColumnProps) => {
-        (Toast as any).text(`${JSON.stringify(item)}`);
+        console.log(`${JSON.stringify(item)}`);
       };
 
       return {