docs: toast usage update

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

@@ -32,6 +32,8 @@ app.use(AddressList);
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -56,13 +58,13 @@ export default {
       addressName:'testaddressName'
     });
     const itemClick = ()=>{
-      Toast.text('Click To Address');
+      showToast.text('Click To Address');
     }
     const delClick = ()=>{
-      Toast.text('Click To Delete');
+      showToast.text('Click To Delete');
     }
     const editClick = ()=>{
-      Toast.text('Click To Edit');
+      showToast.text('Click To Edit');
     }
     return {
       itemClick,
@@ -102,6 +104,8 @@ export default {
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -126,22 +130,22 @@ export default {
         addressName:'testaddressName'
       });
       const itemClick = ()=>{
-        Toast.text('Click To Address');
+        showToast.text('Click To Address');
       }
       const delClick = ()=>{
-        Toast.text('Click To Delete');
+        showToast.text('Click To Delete');
       }
       const editClick = ()=>{
-        Toast.text('Click To Edit');
+        showToast.text('Click To Edit');
       }
       const copyClick = ()=>{
-        Toast.text('Click To Copy');
+        showToast.text('Click To Copy');
       }
       const setClick = ()=>{
-        Toast.text('Click On Settings');
+        showToast.text('Click On Settings');
       }
       const addAddress = ()=>{
-        Toast.text('Click To Add');
+        showToast.text('Click To Add');
       }
       return {
         itemClick,
@@ -179,6 +183,8 @@ export default {
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -203,16 +209,16 @@ export default {
         addressName:'testaddressName'
       });
       const itemClick = ()=>{
-        Toast.text('Click To Address');
+        showToast.text('Click To Address');
       }
       const editClick = ()=>{
-        Toast.text('Click To Edit');
+        showToast.text('Click To Edit');
       }
       const delClick = ()=>{
-        Toast.text('Click To Delete');
+        showToast.text('Click To Delete');
       }
       const addAddress = ()=>{
-        Toast.text('Click To Add');
+        showToast.text('Click To Add');
       }
       return {
         itemClick,

src/packages/__VUE/addresslist/doc.md

@@ -33,6 +33,8 @@ app.use(AddressList);
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -57,13 +59,13 @@ export default {
       addressName:'testaddressName'
     });
     const itemClick = ()=>{
-      Toast.text('Click To Address');
+      showToast.text('Click To Address');
     }
     const delClick = ()=>{
-      Toast.text('Click To Delete');
+      showToast.text('Click To Delete');
     }
     const editClick = ()=>{
-      Toast.text('Click To Edit');
+      showToast.text('Click To Edit');
     }
     return {
       itemClick,
@@ -104,6 +106,8 @@ export default {
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -128,22 +132,22 @@ export default {
         addressName:'testaddressName'
       });
       const itemClick = ()=>{
-        Toast.text('Click To Address');
+        showToast.text('Click To Address');
       }
       const delClick = ()=>{
-        Toast.text('Click To Delete');
+        showToast.text('Click To Delete');
       }
       const editClick = ()=>{
-        Toast.text('Click To Edit');
+        showToast.text('Click To Edit');
       }
       const copyClick = ()=>{
-        Toast.text('Click To Copy');
+        showToast.text('Click To Copy');
       }
       const setClick = ()=>{
-        Toast.text('Click On Settings');
+        showToast.text('Click On Settings');
       }
       const addAddress = ()=>{
-        Toast.text('Click To Add');
+        showToast.text('Click To Add');
       }
       return {
         itemClick,
@@ -182,6 +186,8 @@ export default {
 </template>
 <script lang="ts">
 import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
     const data = ref([
@@ -206,16 +212,16 @@ export default {
         addressName:'testaddressName'
       });
       const itemClick = ()=>{
-        Toast.text('Click To Address');
+        showToast.text('Click To Address');
       }
       const editClick = ()=>{
-        Toast.text('Click To Edit');
+        showToast.text('Click To Edit');
       }
       const delClick = ()=>{
-        Toast.text('Click To Delete');
+        showToast.text('Click To Delete');
       }
       const addAddress = ()=>{
-        Toast.text('Click To Add');
+        showToast.text('Click To Add');
       }
       return {
         itemClick,

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

@@ -57,13 +57,13 @@ export default {
       addressName:'testaddressName'
     });
     const itemClick = ()=>{
-      Toast.text('Click To Address');
+      console.log('Click To Address');
     }
     const delClick = ()=>{
-      Toast.text('Click To Delete');
+      console.log('Click To Delete');
     }
     const editClick = ()=>{
-      Toast.text('Click To Edit');
+      console.log('Click To Edit');
     }
     return {
       itemClick,
@@ -128,22 +128,22 @@ export default {
         addressName:'testaddressName'
       });
       const itemClick = ()=>{
-        Toast.text('Click To Address');
+        console.log('Click To Address');
       }
       const delClick = ()=>{
-        Toast.text('Click To Delete');
+        console.log('Click To Delete');
       }
       const editClick = ()=>{
-        Toast.text('Click To Edit');
+        console.log('Click To Edit');
       }
       const copyClick = ()=>{
-        Toast.text('Click To Copy');
+        console.log('Click To Copy');
       }
       const setClick = ()=>{
-        Toast.text('Click On Settings');
+        console.log('Click On Settings');
       }
       const addAddress = ()=>{
-        Toast.text('Click To Add');
+        console.log('Click To Add');
       }
       return {
         itemClick,
@@ -206,16 +206,16 @@ export default {
         addressName:'testaddressName'
       });
       const itemClick = ()=>{
-        Toast.text('Click To Address');
+        console.log('Click To Address');
       }
       const editClick = ()=>{
-        Toast.text('Click To Edit');
+        console.log('Click To Edit');
       }
       const delClick = ()=>{
-        Toast.text('Click To Delete');
+        console.log('Click To Delete');
       }
       const addAddress = ()=>{
-        Toast.text('Click To Add');
+        console.log('Click To Add');
       }
       return {
         itemClick,

src/packages/__VUE/checkbox/demo.vue

@@ -133,9 +133,9 @@
   </div>
 </template>
 <script lang="ts">
-import { reactive, ref, toRefs, onMounted, Ref } from 'vue';
+import { reactive, ref, toRefs, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('checkbox');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Checklist } from '@nutui/icons-vue';
@@ -229,7 +229,7 @@ export default createDemo({
     };
 
     const changeBox3 = (state: boolean, label: string) => {
-      Toast.text(`${state ? translate('select') : translate('cancel')} ${label}`);
+      showToast.text(`${state ? translate('select') : translate('cancel')} ${label}`);
     };
 
     const changeBox4 = (label: any[]) => {
@@ -253,12 +253,12 @@ export default createDemo({
     };
 
     const toggleAll = (f: boolean) => {
-      Toast.text(`${f ? translate('selectAll') : translate('cancel')}`);
+      showToast.text(`${f ? translate('selectAll') : translate('cancel')}`);
       group.value.toggleAll(f);
     };
 
     const toggleReverse = () => {
-      Toast.text(`反选`);
+      showToast.text(`反选`);
       group.value.toggleReverse();
     };
 

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

@@ -238,7 +238,8 @@ When the value changes, the `change` event will be triggered
 </template>
 <script lang="ts">
   import { reactive, toRefs, ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
@@ -256,7 +257,7 @@ When the value changes, the `change` event will be triggered
 
       const group = ref(null);
       const changeBox4 = (label: any[]) => {
-        Toast.text(`${label.length === state.checkboxsource.length ? 'Select all' : 'Cancel select all'}`);
+        showToast.text(`${label.length === state.checkboxsource.length ? 'Select all' : 'Cancel select all'}`);
       };
 
       const toggleAll = (f: boolean) => {
@@ -264,7 +265,7 @@ When the value changes, the `change` event will be triggered
       };
 
       const toggleReverse = () => {
-        Toast.text(`reverse selection`);
+        showToast.text(`reverse selection`);
         group.value.toggleReverse();
       };
 
@@ -299,7 +300,6 @@ When the value changes, the `change` event will be triggered
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {
@@ -335,7 +335,7 @@ When the value changes, the `change` event will be triggered
 </template>
 <script lang="ts">
   import { reactive, toRefs,ref, Ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
+  import { showToast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {

src/packages/__VUE/checkbox/doc.md

@@ -239,7 +239,8 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs, ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
@@ -257,7 +258,7 @@ app.use(Checklist);
 
       const group = ref(null);
       const changeBox4 = (label: any[]) => {
-        Toast.text(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
+        showToast.text(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
       };
 
       const toggleAll = (f: boolean) => {
@@ -265,7 +266,7 @@ app.use(Checklist);
       };
 
       const toggleReverse = () => {
-        Toast.text(`反选`);
+        showToast.text(`反选`);
         group.value.toggleReverse();
       };
 
@@ -300,7 +301,6 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {
@@ -337,7 +337,7 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs,ref, Ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
+  import { showToast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {

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

@@ -239,7 +239,6 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs, ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {
@@ -257,7 +256,7 @@ app.use(Checklist);
 
       const group = ref(null);
       const changeBox4 = (label: any[]) => {
-        Toast.text(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
+        console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
       };
 
       const toggleAll = (f: boolean) => {
@@ -265,7 +264,7 @@ app.use(Checklist);
       };
 
       const toggleReverse = () => {
-        Toast.text(`反选`);
+        console.log(`反选`);
         group.value.toggleReverse();
       };
 
@@ -300,7 +299,6 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {
@@ -337,7 +335,6 @@ app.use(Checklist);
 </template>
 <script lang="ts">
   import { reactive, toRefs,ref, Ref } from 'vue';
-  import { Toast } from '@nutui/nutui';
   export default {
     props: {},
     setup() {

src/packages/__VUE/datepicker/demo.vue

@@ -97,11 +97,11 @@
 </template>
 
 <script lang="ts">
-import { toRefs, watch, ref, reactive } from 'vue';
+import { toRefs, ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('date-picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -221,7 +221,7 @@ export default createDemo({
       selectedValue: (string | number)[];
       selectedOptions: any;
     }) => {
-      Toast.text(selectedOptions.map((val: any) => val.text).join(''));
+      showToast.text(selectedOptions.map((val: any) => val.text).join(''));
     };
 
     const confirm2 = ({
@@ -233,7 +233,7 @@ export default createDemo({
     }) => {
       const date = selectedValue.slice(0, 3).join('-');
       const time = selectedValue.slice(3).join(':');
-      Toast.text(date + ' ' + time);
+      showToast.text(date + ' ' + time);
     };
 
     const confirm3 = ({
@@ -243,7 +243,7 @@ export default createDemo({
       selectedValue: (string | number)[];
       selectedOptions: any;
     }) => {
-      Toast.text(selectedValue.join(':'));
+      showToast.text(selectedValue.join(':'));
     };
 
     const confirm4 = ({
@@ -261,7 +261,7 @@ export default createDemo({
         .slice(3)
         .map((op: any) => op.value)
         .join(':');
-      Toast.text(selectedOptions[0].text + translate('year') + date + ' ' + time);
+      showToast.text(selectedOptions[0].text + translate('year') + date + ' ' + time);
     };
 
     const confirm5 = ({
@@ -271,7 +271,7 @@ export default createDemo({
       selectedValue: (string | number)[];
       selectedOptions: any;
     }) => {
-      Toast.text(selectedValue.join('-'));
+      showToast.text(selectedValue.join('-'));
     };
 
     const popupConfirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {

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

@@ -31,13 +31,15 @@ app.use(DatePicker);
 
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
-      const minDate = new Date(2020, 0, 1),
-      const maxDate = new Date(2025, 10, 1),
+      const minDate = new Date(2020, 0, 1);
+      const maxDate = new Date(2025, 10, 1);
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(''));
+        showToast.text(selectedOptions.map((val: any) => val.text).join(''));
       }
       return {
         currentDate,
@@ -123,11 +125,13 @@ app.use(DatePicker);
 
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join('-'));
+        showToast.text(selectedOptions.map((val: any) => val.text).join('-'));
       }
       return {
         currentDate,
@@ -155,12 +159,15 @@ app.use(DatePicker);
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
+    setup() {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        Toast.text(date + ' ' + time) ;
+        showToast.text(date + ' ' + time) ;
       }
       return {
         currentDate,
@@ -189,11 +196,13 @@ app.use(DatePicker);
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedValue.join(':'));
+        showToast.text(selectedValue.join(':'));
       }
       return {
         currentDate,
@@ -223,13 +232,15 @@ app.use(DatePicker);
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
         time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        Toast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
+        showToast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -281,11 +292,13 @@ app.use(DatePicker);
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedValue.join(':')) ;
+        showToast.text(selectedValue.join(':')) ;
       }
       return {
         currentDate,
@@ -317,6 +330,8 @@ app.use(DatePicker);
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 0, 0);
@@ -347,7 +362,7 @@ app.use(DatePicker);
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-         Toast.text(selectedOptions.map((option) => option.text).join(''));
+         showToast.text(selectedOptions.map((option) => option.text).join(''));
       }
       return {
         currentDate,

src/packages/__VUE/datepicker/doc.md

@@ -31,13 +31,15 @@ app.use(DatePicker);
 
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
-      const minDate = new Date(2020, 0, 1),
-      const maxDate = new Date(2025, 10, 1),
+      const minDate = new Date(2020, 0, 1);
+      const maxDate = new Date(2025, 10, 1);
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(''));
+        showToast.text(selectedOptions.map((val: any) => val.text).join(''));
       }
       return {
         currentDate,
@@ -125,11 +127,13 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join('-'));
+        showToast.text(selectedOptions.map((val: any) => val.text).join('-'));
       }
       return {
         currentDate,
@@ -159,12 +163,15 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
+    setup() {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        Toast.text(date + ' ' + time) ;
+        showToast.text(date + ' ' + time) ;
       }
       return {
         currentDate,
@@ -193,11 +200,13 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedValue.join(':'));
+        showToast.text(selectedValue.join(':'));
       }
       return {
         currentDate,
@@ -230,13 +239,15 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
         time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        Toast.text(selectedOptions[0].text + '年' + date + ' ' + time);
+        showToast.text(selectedOptions[0].text + '年' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -287,11 +298,13 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedValue.join(':')) ;
+        showToast.text(selectedValue.join(':')) ;
       }
       return {
         currentDate,
@@ -325,6 +338,8 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 </template>
 <script>
   import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 0, 0);
@@ -355,7 +370,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedOptions.map((option) => option.text).join(''));
+        showToast.text(selectedOptions.map((option) => option.text).join(''));
       }
       return {
         currentDate,

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

@@ -33,11 +33,11 @@ app.use(DatePicker);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const minDate = new Date(2020, 0, 1),
-      const maxDate = new Date(2025, 10, 1),
+      const minDate = new Date(2020, 0, 1);
+      const maxDate = new Date(2025, 10, 1);
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join(''));
+        console.log(selectedOptions.map((val: any) => val.text).join(''));
       }
       return {
         currentDate,
@@ -129,7 +129,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedOptions.map((val: any) => val.text).join('-'));
+        console.log(selectedOptions.map((val: any) => val.text).join('-'));
       }
       return {
         currentDate,
@@ -160,11 +160,12 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 <script>
   import { ref } from 'vue';
   export default {
+    setup() {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        Toast.text(date + ' ' + time) ;
+        console.log(date + ' ' + time) ;
       }
       return {
         currentDate,
@@ -197,7 +198,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedValue.join(':'));
+        console.log(selectedValue.join(':'));
       }
       return {
         currentDate,
@@ -236,7 +237,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
         time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        Toast.text(selectedOptions[0].text + '年' + date + ' ' + time);
+        console.log(selectedOptions[0].text + '年' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -291,7 +292,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedValue.join(':')) ;
+        console.log(selectedValue.join(':')) ;
       }
       return {
         currentDate,
@@ -355,7 +356,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        Toast.text(selectedOptions.map((option) => option.text).join(''));
+        console.log(selectedOptions.map((option) => option.text).join(''));
       }
       return {
         currentDate,

src/packages/__VUE/form/demo.vue

@@ -191,7 +191,7 @@
 </template>
 
 <script lang="ts">
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('form');
@@ -311,7 +311,7 @@ export default createDemo({
             if (valid) {
               console.log('success', dynamicForm);
             } else {
-              Toast.warn(errors[0].message);
+              showToast.warn(errors[0].message);
               console.log('error submit!!', errors);
             }
           });
@@ -434,9 +434,9 @@ export default createDemo({
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading(translate('asyncValidator'));
+        showToast.loading(translate('asyncValidator'));
         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/form/doc.en-US.md

@@ -43,7 +43,6 @@ app.use(FormItem);
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup(){
     const basicData = reactive({
@@ -85,7 +84,8 @@ export default {
 </template>
 <script lang="ts">
 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 dynamicRefForm = ref<any>(null);
@@ -104,7 +104,7 @@ export default {
             if (valid) {
               console.log('success', dynamicForm);
             } else {
-              Toast.warn(errors[0].message);
+              showToast.warn(errors[0].message);
               console.log('error submit!!', errors);
             }
           });
@@ -175,7 +175,8 @@ export default {
 </template>
 <script lang="ts">
 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 formData = reactive({
@@ -220,9 +221,9 @@ setup(){
     // Promise async validator
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading('Simulating asynchronous verification');
+        showToast.loading('Simulating asynchronous verification');
         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/form/doc.md

@@ -43,7 +43,6 @@ app.use(FormItem);
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup(){
     const basicData = reactive({
@@ -85,7 +84,8 @@ export default {
 </template>
 <script lang="ts">
 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 dynamicRefForm = ref<any>(null);
@@ -104,7 +104,7 @@ export default {
             if (valid) {
               console.log('success', dynamicForm);
             } else {
-              Toast.warn(errors[0].message);
+              showToast.warn(errors[0].message);
               console.log('error submit!!', errors);
             }
           });
@@ -175,7 +175,8 @@ export default {
 </template>
 <script lang="ts">
 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 formData = reactive({
@@ -220,9 +221,9 @@ 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/form/doc.taro.md

@@ -43,7 +43,6 @@ app.use(FormItem);
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup(){
     const basicData = reactive({
@@ -85,7 +84,6 @@ export default {
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
   setup(){
     const dynamicRefForm = ref<any>(null);
@@ -104,7 +102,7 @@ export default {
             if (valid) {
               console.log('success', dynamicForm);
             } else {
-              Toast.warn(errors[0].message);
+              console.log(errors[0].message);
               console.log('error submit!!', errors);
             }
           });
@@ -175,7 +173,6 @@ export default {
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
-import { Toast } from '@nutui/nutui';
 export default {
 setup(){
     const formData = reactive({
@@ -220,9 +217,9 @@ setup(){
     // 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/switch/demo.vue

@@ -64,6 +64,7 @@
 import { ref, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('switch');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -99,7 +100,6 @@ export default createDemo({
   components: { Loading },
   setup() {
     initTranslate();
-    let { proxy } = getCurrentInstance() as any;
     const checked = ref(true);
     const checkedAsync = ref(true);
     const loadingAsync = ref(false);
@@ -107,11 +107,11 @@ export default createDemo({
     // const checkedStr = ref('开');
 
     const change = (value: boolean, event: Event) => {
-      proxy.$toast.text(`value：${value}`);
+      showToast.text(`value：${value}`);
     };
 
     const changeAsync = (value: boolean, event: Event) => {
-      proxy.$toast.text(`after 2 second： ${value}`);
+      showToast.text(`after 2 second： ${value}`);
       loadingAsync.value = true;
       setTimeout(() => {
         checkedAsync.value = value;

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

@@ -12,7 +12,6 @@ import { Switch } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Switch);
-
 ```
 
 
@@ -77,13 +76,15 @@ app.use(Switch);
   <nut-switch v-model="checked" @change="change" />
 </template>
 <script lang="ts">
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
+
   export default {
     setup() {
-      let { proxy } = getCurrentInstance() as any;
       const checked = ref(true);
       const change = (value: boolean, event: Event) => {
-        proxy.$toast.text(`value：${value}`);
+        showToast.text(`value：${value}`);
       };
       return {
         checked,
@@ -101,13 +102,15 @@ app.use(Switch);
   <nut-switch :model-value="checkedAsync" @change="changeAsync" />
 </template>
 <script lang="ts">
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
+
   export default {
     setup() {
-      let { proxy } = getCurrentInstance() as any;
       const checkedAsync = ref(true);
       const changeAsync = (value: boolean, event: Event) => {
-        proxy.$toast.text(`after 2 second： ${value}`);
+        showToast.text(`after 2 second： ${value}`);
         setTimeout(() => {
           checkedAsync.value = value;
         }, 2000);

src/packages/__VUE/switch/doc.md

@@ -12,7 +12,6 @@ import { Switch } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Switch);
-
 ```
 
 
@@ -77,13 +76,15 @@ app.use(Switch);
   <nut-switch v-model="checked" @change="change" />
 </template>
 <script lang="ts">
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
+
   export default {
     setup() {
-      let { proxy } = getCurrentInstance() as any;
       const checked = ref(true);
       const change = (value: boolean, event: Event) => {
-        proxy.$toast.text(`触发了change事件，开关状态：${value}`);
+        showToast.text(`触发了change事件，开关状态：${value}`);
       };
       return {
         checked,
@@ -101,13 +102,15 @@ app.use(Switch);
   <nut-switch :model-value="checkedAsync" @change="changeAsync" />
 </template>
 <script lang="ts">
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
+
   export default {
     setup() {
-      let { proxy } = getCurrentInstance() as any;
       const checkedAsync = ref(true);
       const changeAsync = (value: boolean, event: Event) => {
-        proxy.$toast.text(`2秒后异步触发 ${value}`);
+        showToast.text(`2秒后异步触发 ${value}`);
         setTimeout(() => {
           checkedAsync.value = value;
         }, 2000);

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

@@ -77,13 +77,12 @@ app.use(Switch);
   <nut-switch v-model="checked" @change="change" />
 </template>
 <script lang="ts">
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
   export default {
     setup() {
-      let { proxy } = getCurrentInstance() as any;
       const checked = ref(true);
       const change = (value: boolean, event: Event) => {
-        proxy.$toast.text(`触发了change事件，开关状态：${value}`);
+        console.log(`触发了change事件，开关状态：${value}`);
       };
       return {
         checked,
@@ -101,13 +100,12 @@ app.use(Switch);
   <nut-switch :model-value="checkedAsync" @change="changeAsync" />
 </template>
 <script lang="ts">
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
   export default {
     setup() {
-      let { proxy } = getCurrentInstance() as any;
       const checkedAsync = ref(true);
       const changeAsync = (value: boolean, event: Event) => {
-        proxy.$toast.text(`2秒后异步触发 ${value}`);
+        console.log(`2秒后异步触发 ${value}`);
         setTimeout(() => {
           checkedAsync.value = value;
         }, 2000);

src/packages/__VUE/timeselect/demo.vue

@@ -73,8 +73,9 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+import { reactive, toRefs, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { showToast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('time-select');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -101,7 +102,6 @@ const initTranslate = () =>
 export default createDemo({
   setup() {
     initTranslate();
-    const { proxy } = getCurrentInstance() as any;
     const state = reactive({
       visible1: false,
       currentKey1: 0,
@@ -155,7 +155,7 @@ export default createDemo({
     };
 
     const handleSelected1 = (obj: any) => {
-      proxy.$toast.text(`${translate('content')}：${JSON.stringify(obj)}`);
+      showToast.text(`${translate('content')}：${JSON.stringify(obj)}`);
     };
 
     const handleChange2 = (pannelKey: number) => {
@@ -184,7 +184,7 @@ export default createDemo({
     };
 
     const handleSelected2 = (obj: any) => {
-      proxy.$toast.text(`${translate('content')}：${JSON.stringify(obj)}`);
+      showToast.text(`${translate('content')}：${JSON.stringify(obj)}`);
     };
 
     const handleClick3 = () => {

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

@@ -36,11 +36,12 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible1: false,
         currentKey1: 0,
@@ -80,7 +81,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected1 = (obj: any) => {
-        proxy.$toast.text(`Your choose：${JSON.stringify(obj)}`);
+        showToast.text(`Your choose：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {
@@ -124,11 +125,12 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible2: false,
         currentKey2: 0,
@@ -171,7 +173,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected2 = (obj: any) => {
-        proxy.$toast.text(`Your choose：${JSON.stringify(obj)}`);
+        showToast.text(`Your choose：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {
@@ -221,11 +223,12 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible2: false,
         currentKey2: 0,
@@ -268,7 +271,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected2 = (obj: any) => {
-        proxy.$toast.text(`Your Choose ：${JSON.stringify(obj)}`);
+        showToast.text(`Your Choose ：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {

src/packages/__VUE/timeselect/doc.md

@@ -36,11 +36,12 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';  
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible1: false,
         currentKey1: 0,
@@ -80,7 +81,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected1 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+        showToast.text(`您选择了：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {
@@ -124,11 +125,12 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible2: false,
         currentKey2: 0,
@@ -171,7 +173,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected2 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+        showToast.text(`您选择了：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {
@@ -221,11 +223,12 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible2: false,
         currentKey2: 0,
@@ -268,7 +271,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected2 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+        showToast.text(`您选择了：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {

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

@@ -36,11 +36,10 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible1: false,
         currentKey1: 0,
@@ -80,7 +79,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected1 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+        console.log(`您选择了：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {
@@ -124,11 +123,10 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible2: false,
         currentKey2: 0,
@@ -171,7 +169,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected2 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+        console.log(`您选择了：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {
@@ -221,11 +219,10 @@ app.use(TimeDetail);
   </nut-time-select>
 </template>
 <script lang="ts">
-  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  import { reactive, toRefs, onMounted } from 'vue';
   export default {
     props: {},
     setup() {
-      const { proxy } = getCurrentInstance() as any;
       const state = reactive({
         visible2: false,
         currentKey2: 0,
@@ -268,7 +265,7 @@ app.use(TimeDetail);
       };
 
       const handleSelected2 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
+        console.log(`您选择了：${JSON.stringify(obj)}`);
       };
 
       onMounted(() => {