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

src/packages/__VUE/dialog/demo.vue

@@ -39,7 +39,7 @@
 import { createVNode, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('dialog');
-import { Dialog } from '@/packages/nutui.vue';
+import { showDialog } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
@@ -94,7 +94,7 @@ export default createDemo({
     };
 
     const baseClick = (): void => {
-      Dialog({
+      showDialog({
         title: translate('basic'),
         content: createVNode('span', { style: { color: 'red' } }, translate('content3')),
         onCancel,
@@ -103,7 +103,7 @@ export default createDemo({
     };
 
     const transparentClick = (): void => {
-      Dialog({
+      showDialog({
         overlayStyle: { background: 'rgba(0,0,0,0)' },
         title: translate('transparent'),
         content: 'Content',
@@ -113,7 +113,7 @@ export default createDemo({
     };
 
     const htmlClick = (): void => {
-      Dialog({
+      showDialog({
         title: translate('html'),
         content:
           "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
@@ -123,7 +123,7 @@ export default createDemo({
     };
 
     const beforeCloseClick = (): void => {
-      Dialog({
+      showDialog({
         title: translate('beforeClose'),
         content: translate('content4'),
         onCancel,
@@ -139,14 +139,14 @@ export default createDemo({
     };
 
     const noTitleClick = () => {
-      Dialog({
+      showDialog({
         content: translate('noTitle'),
         onCancel,
         onOk
       });
     };
     const tipsClick = () => {
-      Dialog({
+      showDialog({
         title: translate('tips'),
         content: translate('content'),
         noCancelBtn: true,
@@ -155,7 +155,7 @@ export default createDemo({
       });
     };
     const verticalClick = () => {
-      Dialog({
+      showDialog({
         title: translate('tips'),
         content: translate('content1'),
         footerDirection: 'vertical',
@@ -172,7 +172,7 @@ export default createDemo({
     };
 
     const teleportClick = (teleport: string) => {
-      Dialog({
+      showDialog({
         teleport,
         title: 'teleport to ' + teleport,
         content: translate('content2'),

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

@@ -36,7 +36,8 @@ app.use(Dialog);
 </template>
 <script lang="ts">
 import { ref,createVNode } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 export default {
     setup() {
         const onCancel = () => {
@@ -46,7 +47,7 @@ export default {
           console.log('event ok');
         };
         const baseClick = (): void => {
-          Dialog({
+          showDialog({
             title: 'Basic spring frame',
             content: createVNode('span', { style: { color: 'red' } }, 'I can be a custom component'),
             onCancel,
@@ -54,7 +55,7 @@ export default {
           });
         };
         const transparentClick = (): void => {
-          Dialog({
+          showDialog({
             overlayStyle: { background: 'rgba(0,0,0,0)' },
             title: 'Transparent Dialog',
             content: 'Content',
@@ -63,7 +64,7 @@ export default {
           });
         };
         const htmlClick = (): void => {
-          Dialog({
+          showDialog({
             title: "Use html",
             content:
               "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
@@ -72,7 +73,7 @@ export default {
           });
         };
         const beforeCloseClick = (): void => {
-          Dialog({
+          showDialog({
             title: 'Before Close',
             content: 'Click confirm to close it in 1 second',
             onCancel,
@@ -87,14 +88,14 @@ export default {
           });
         };
         const noTitleClick = () => {
-          Dialog({
+          showDialog({
             content: 'Content',
             onCancel,
             onOk
           });
         };
         const tipsClick = () => {
-          Dialog({
+          showDialog({
             title: 'Title',
             content: 'Function call and component call are supported.',
             noCancelBtn: true,
@@ -103,7 +104,7 @@ export default {
           });
         };
         const verticalClick = () => {
-          Dialog({
+          showDialog({
             title: 'Title',
             content: 'Support vertical arrangement of bottom buttons.',
             footerDirection: 'vertical',
@@ -133,11 +134,11 @@ export default {
 ```
 
 ``` javascript
-Dialog({
+showDialog({
   teleport: '#app',
   ...
 });
-Dialog({
+showDialog({
   teleport: '.demo',
   ...
 });
@@ -147,7 +148,8 @@ Dialog({
 
 ```javascript
 import { ref } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 import { getCurrentInstance } from 'vue';
 
 export default {

src/packages/__VUE/dialog/doc.md

@@ -36,7 +36,8 @@ app.use(Dialog);
 </template>
 <script lang="ts">
 import { ref,createVNode } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 export default {
     setup() {
         const onCancel = () => {
@@ -46,7 +47,7 @@ export default {
           console.log('event ok');
         };
         const baseClick = (): void => {
-          Dialog({
+          showDialog({
             title: '基础弹框',
             content: createVNode('span', { style: { color: 'red' } }, '我可以是一个自定义组件'),
             onCancel,
@@ -54,7 +55,7 @@ export default {
           });
         };
         const transparentClick = (): void => {
-          Dialog({
+          showDialog({
             overlayStyle: { background: 'rgba(0,0,0,0)' },
             title: '透明弹框',
             content: 'Content',
@@ -63,7 +64,7 @@ export default {
           });
         };
         const htmlClick = (): void => {
-          Dialog({
+          showDialog({
             title: "支持富文本 html",
             content:
               "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
@@ -72,7 +73,7 @@ export default {
           });
         };
         const beforeCloseClick = (): void => {
-          Dialog({
+          showDialog({
             title: '异步关闭',
             content: '点击确认后，1秒后关闭',
             onCancel,
@@ -87,14 +88,14 @@ export default {
           });
         };
         const noTitleClick = () => {
-          Dialog({
+          showDialog({
             content: '无标题弹框',
             onCancel,
             onOk
           });
         };
         const tipsClick = () => {
-          Dialog({
+          showDialog({
             title: '温馨提示',
             content: '支持函数调用和组件调用两种方式。',
             noCancelBtn: true,
@@ -103,7 +104,7 @@ export default {
           });
         };
         const verticalClick = () => {
-          Dialog({
+          showDialog({
             title: '温馨提示',
             content: '支持底部按钮纵向排列。',
             footerDirection: 'vertical',
@@ -133,11 +134,11 @@ export default {
 ```
 
 ``` javascript
-Dialog({
+showDialog({
   teleport: '#app',
   ...
 });
-Dialog({
+showDialog({
   teleport: '.demo',
   ...
 });
@@ -147,7 +148,8 @@ Dialog({
 
 ```javascript
 import { ref } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 import { getCurrentInstance } from 'vue';
 
 export default {

src/packages/__VUE/dialog/index.ts

@@ -20,12 +20,12 @@ export class DialogOptions {
   footerDirection?: string = 'horizontal'; //使用横纵方向 可选值 horizontal、vertical
 
   // function
-  onUpdate?: (value: boolean) => void;
+  onUpdate?: (value: boolean) => any | void;
   onOk?: () => void;
   onCancel?: () => void;
   onOpened?: () => void;
   onClosed?: () => void;
-  beforeClose?: () => void;
+  beforeClose?: (action: string) => any;
 
   visible?: boolean = true;
   noFooter?: boolean = false;

src/packages/__VUE/imagepreview/demo.vue

@@ -30,9 +30,9 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('imagepreview');
+const { createDemo, translate } = createComponent('image-preview');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { ImagePreview } from '@/packages/nutui.vue';
+import { showImagePreview } from '@/packages/nutui.vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -113,7 +113,7 @@ export default createDemo({
     };
 
     const fnShow = () => {
-      ImagePreview({
+      showImagePreview({
         show: true,
         images: resData.imgData,
         onClose: () => onClose()

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

@@ -252,7 +252,8 @@ app.use(ImagePreview);
 </template>
 
 <script lang="ts">
-  import { ImagePreview } from '@nutui/nutui';
+  import { showImagePreview } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/imagepreview/style';
   import { reactive, toRefs } from 'vue';
   export default {
     setup() {
@@ -278,11 +279,11 @@ app.use(ImagePreview);
         };
 
         const fnShow = () => {
-        ImagePreview({
-            show: true,
-            images: resData.imgData,
-            onClose
-        })
+            showImagePreview({
+                show: true,
+                images: resData.imgData,
+                onClose
+            })
         };
         
         return {

src/packages/__VUE/imagepreview/doc.md

@@ -252,7 +252,8 @@ app.use(ImagePreview);
 </template>
 
 <script lang="ts">
-  import { ImagePreview } from '@nutui/nutui';
+  import { showImagePreview } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/imagepreview/style';
   import { reactive, toRefs } from 'vue';
   export default {
     setup() {
@@ -274,15 +275,15 @@ app.use(ImagePreview);
         });
 
         const onClose = () => {
-        console.log('imagepreview closed');
+            console.log('imagepreview closed');
         };
 
         const fnShow = () => {
-        ImagePreview({
-            show: true,
-            images: resData.imgData,
-            onClose
-        })
+            showImagePreview({
+                show: true,
+                images: resData.imgData,
+                onClose
+            })
         };
         
         return {

src/packages/__VUE/notify/demo.vue

@@ -15,7 +15,7 @@
       <nut-cell is-Link @click="positionNotify(translate('cusPostion'))"> {{ translate('cusPostion') }} </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('useTemplate')">
-      <nut-cell is-Link @click="showNotify">{{ translate('useTemplate') }}</nut-cell>
+      <nut-cell is-Link @click="onClick">{{ translate('useTemplate') }}</nut-cell>
       <nut-notify v-model:visible="show" :duration="2000">
         <span>Content</span>
       </nut-notify>
@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { Notify } from '../../nutui.vue';
+import { showNotify } from '../../nutui.vue';
 import { ref } from 'vue';
 const { createDemo, translate } = createComponent('notify');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -62,7 +62,7 @@ export default createDemo({
   setup() {
     initTranslate();
     const baseNotify = (msg: string) => {
-      Notify.text(msg, {
+      showNotify.text(msg, {
         onClose: () => {
           console.log('close');
         },
@@ -72,28 +72,28 @@ export default createDemo({
       });
     };
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg, { duration: 1000 });
+      showNotify.primary(msg, { duration: 1000 });
     };
     const successNotify = (msg: string) => {
-      Notify.success(msg);
+      showNotify.success(msg);
     };
     const errorNotify = (msg: string) => {
-      Notify.danger(msg);
+      showNotify.danger(msg);
     };
     const warningNotify = (msg: string) => {
-      Notify.warn(msg);
+      showNotify.warn(msg);
     };
     const cusBgNotify = (msg: string) => {
-      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 1000 });
+      showNotify.text(msg, { duration: 1000 });
     };
     const positionNotify = (msg: string) => {
-      Notify.text(msg, { position: 'bottom' });
+      showNotify.text(msg, { position: 'bottom' });
     };
     const show = ref(false);
-    const showNotify = () => {
+    const onClick = () => {
       show.value = true;
     };
     return {
@@ -106,7 +106,7 @@ export default createDemo({
       timeNotify,
       positionNotify,
       show,
-      showNotify,
+      onClick,
       translate
     };
   }

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

@@ -23,11 +23,12 @@ app.use(Notify);
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const baseNotify = (msg: string) => {
-      Notify.text(msg, {
+      showNotify.text(msg, {
         onClose: () => {
           console.log('close');
         },
@@ -59,20 +60,21 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg);
+      showNotify.primary(msg);
     };
     const successNotify = (msg: string) => {
-      Notify.success(msg);
+      showNotify.success(msg);
     };
     const errorNotify = (msg: string) => {
-      Notify.danger(msg);
+      showNotify.danger(msg);
     };
     const warningNotify = (msg: string) => {
-      Notify.warn(msg);
+      showNotify.warn(msg);
     };
     return {
       primaryNotify,
@@ -101,17 +103,18 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const cusBgNotify = (msg: string) => {
-      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 10000 });
+      showNotify.text(msg, { duration: 10000 });
     };
     const positionNotify = (msg: string) => {
-      Notify.text(msg, { position: 'bottom' });
+      showNotify.text(msg, { position: 'bottom' });
     };
     return {
       cusBgNotify,
@@ -131,7 +134,7 @@ export default {
 ```html
 <template>
   <nut-cell-group title="Template use">
-    <nut-cell is-Link @click="showNotify">Template use</nut-cell>
+    <nut-cell is-Link @click="onClick">Template use</nut-cell>
     <nut-notify v-model:visible="show" :duration="2000">
       <span>Content</span>
     </nut-notify>
@@ -139,16 +142,17 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const show = ref(false);
-    const showNotify = () => {
+    const onClick = () => {
       show.value = true;
     };
     return {
       show,
-      showNotify
+      onClick
     };
   }
 }

src/packages/__VUE/notify/doc.md

@@ -20,11 +20,12 @@ app.use(Notify);
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const baseNotify = (msg: string) => {
-      Notify.text(msg, {
+      showNotify.text(msg, {
         onClose: () => {
           console.log('close');
         },
@@ -54,20 +55,21 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg);
+      showNotify.primary(msg);
     };
     const successNotify = (msg: string) => {
-      Notify.success(msg);
+      showNotify.success(msg);
     };
     const errorNotify = (msg: string) => {
-      Notify.danger(msg);
+      showNotify.danger(msg);
     };
     const warningNotify = (msg: string) => {
-      Notify.warn(msg);
+      showNotify.warn(msg);
     };
     return {
       primaryNotify,
@@ -96,17 +98,18 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const cusBgNotify = (msg: string) => {
-      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 10000 });
+      showNotify.text(msg, { duration: 10000 });
     };
     const positionNotify = (msg: string) => {
-      Notify.text(msg, { position: 'bottom' });
+      showNotify.text(msg, { position: 'bottom' });
     };
     return {
       cusBgNotify,
@@ -124,7 +127,7 @@ export default {
 ```html
 <template>
   <nut-cell-group title="组件调用">
-    <nut-cell is-Link @click="showNotify">组件调用</nut-cell>
+    <nut-cell is-Link @click="onClick">组件调用</nut-cell>
     <nut-notify v-model:visible="show" :duration="2000">
       <span>Content</span>
     </nut-notify>
@@ -132,16 +135,17 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const show = ref(false);
-    const showNotify = () => {
+    const onClick = () => {
       show.value = true;
     };
     return {
       show,
-      showNotify
+      onClick
     };
   }
 }

src/packages/__VUE/toast/demo.vue

@@ -23,7 +23,7 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('toast');
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { onUnmounted } from 'vue';
 const initTranslate = () =>
@@ -57,28 +57,28 @@ export default createDemo({
   setup() {
     initTranslate();
     const textToast = (msg: string) => {
-      Toast.text(msg);
+      showToast.text(msg);
     };
     const titleToast = (msg: string) => {
-      Toast.text(msg, {
+      showToast.text(msg, {
         title: translate('toastTitle')
       });
     };
     const successToast = (msg: string) => {
-      Toast.success(msg);
+      showToast.success(msg);
     };
     const errorToast = (msg: string) => {
-      Toast.fail(msg);
+      showToast.fail(msg);
     };
     const warningToast = (msg: string) => {
-      Toast.warn(msg);
+      showToast.warn(msg);
     };
     const loadingToast = (msg: string) => {
-      Toast.loading(msg);
+      showToast.loading(msg);
     };
     let t: any;
     const NoToast = (msg: string) => {
-      t = Toast.text(msg, {
+      t = showToast.text(msg, {
         duration: 0
       });
     };
@@ -88,14 +88,14 @@ export default createDemo({
     });
 
     const BottomToast = (msg: string) => {
-      Toast.text(msg, {
+      showToast.text(msg, {
         id: 'taset11',
         center: false,
         bottom: '10%'
       });
     };
     const NoLoading = (msg: string) => {
-      Toast.loading(msg, {
+      showToast.loading(msg, {
         cover: true
       });
     };

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

@@ -40,11 +40,12 @@ export default {
   <nut-cell title="Text" is-link @click="textToast('text message~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg);
+    const textToast = (msg) => {
+      showToast.text(msg);
     };
     return {
       textToast,
@@ -62,11 +63,12 @@ export default {
   <nut-cell title="Toast Title" is-link @click="textToast('title message~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         title: 'title'
       });
     };
@@ -86,11 +88,12 @@ export default {
   <nut-cell title="Toast Success" is-link @click="textToast('Success')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.success(msg);
+    const textToast = (msg) => {
+      showToast.success(msg);
     };
     return {
       textToast,
@@ -109,11 +112,12 @@ export default {
   <nut-cell title="Toast Fail" is-link @click="textToast('Fail')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.fail(msg);
+    const textToast = (msg) => {
+      showToast.fail(msg);
     };
     return {
       textToast,
@@ -132,11 +136,12 @@ export default {
   <nut-cell title="Toast Warn" is-link @click="textToast('Warn')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.warn(msg);
+    const textToast = (msg) => {
+      showToast.warn(msg);
     };
     return {
       textToast,
@@ -155,11 +160,12 @@ export default {
   <nut-cell title="Toast Loading" is-link @click="textToast('Loading')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.loading(msg);
+    const textToast = (msg) => {
+      showToast.loading(msg);
     };
     return {
       textToast,
@@ -178,11 +184,12 @@ export default {
   <nut-cell title="Toast Not Disappear" is-link @click="textToast('Toast Not Disappear')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-     Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         duration: 0
       });
     };
@@ -202,11 +209,12 @@ export default {
   <nut-cell title="Custom Bottom Height" is-link @click="textToast('Custom Bottom Height')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         center: false,
         bottom: '10%'
       });
@@ -227,11 +235,12 @@ export default {
   <nut-cell title="Loading with transparent cover" is-link @click="textToast('Loading')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.loading(msg, {
+    const textToast = (msg) => {
+      showToast.loading(msg, {
         cover: true
       });
     };
@@ -247,10 +256,11 @@ export default {
 
 ###  Support import and use in JS modules
 ``` javascript
-import { Toast } from "@nutui/nutui";
-Toast.text('use in js module');
+import { showToast } from "@nutui/nutui";
+import '@nutui/nutui/dist/packages/toast/style';
+showToast.text('use in js module');
 // Return the instance, you can manually call the hide method in the instance to close the prompt
-const toast = Toast.loading('use in js module');
+const toast = showToast.loading('use in js module');
 toast.hide();
 ```
 
@@ -259,12 +269,12 @@ toast.hide();
 ### Methods
 | Methods       | Description        | Attribute         | Return value                                  |
 |---------------|--------------------|-------------------|-----------------------------------------------|
-| Toast.text    | Show text toast    | message｜ options | toast instance(message support incoming HTML) |
-| Toast.success | Show success toast | message｜ options | toast instance                                |
-| Toast.fail    | Show fail toast    | message｜ options | toast instance                                |
-| Toast.warn    | Show warn toast    | message｜ options | toast instance                                |
-| Toast.hide    | Close toast        | clearAll: boolean | void                                          |
-| Toast.loading | Show loading toast | message｜ options | toast instance                                |
+| showToast.text    | Show text toast    | message｜ options | toast instance(message support incoming HTML) |
+| showToast.success | Show success toast | message｜ options | toast instance                                |
+| showToast.fail    | Show fail toast    | message｜ options | toast instance                                |
+| showToast.warn    | Show warn toast    | message｜ options | toast instance                                |
+| showToast.hide    | Close toast        | clearAll: boolean | void                                          |
+| showToast.loading | Show loading toast | message｜ options | toast instance                                |
 
 ### ToastOptions
 

src/packages/__VUE/toast/doc.md

@@ -40,11 +40,12 @@ export default {
   <nut-cell title="Text 文字提示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg);
+    const textToast = (msg) => {
+      showToast.text(msg);
     };
     return {
       textToast,
@@ -62,11 +63,12 @@ export default {
   <nut-cell title="Toast 标题展示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         title: '标题文字'
       });
     };
@@ -86,11 +88,12 @@ export default {
   <nut-cell title="Toast 成功提示" is-link @click="textToast('成功提示')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.success(msg);
+    const textToast = (msg) => {
+      showToast.success(msg);
     };
     return {
       textToast,
@@ -109,11 +112,12 @@ export default {
   <nut-cell title="Toast 失败提示" is-link @click="textToast('失败提示')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.fail(msg);
+    const textToast = (msg) => {
+      showToast.fail(msg);
     };
     return {
       textToast,
@@ -132,11 +136,12 @@ export default {
   <nut-cell title="Toast 警告提示" is-link @click="textToast('警告提示')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.warn(msg);
+    const textToast = (msg) => {
+      showToast.warn(msg);
     };
     return {
       textToast,
@@ -155,11 +160,12 @@ export default {
   <nut-cell title="Toast 加载提示" is-link @click="textToast('加载中')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.loading(msg);
+    const textToast = (msg) => {
+      showToast.loading(msg);
     };
     return {
       textToast,
@@ -178,11 +184,12 @@ export default {
   <nut-cell title="Toast不消失" is-link @click="textToast('Toast不消失')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-     Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         duration: 0
       });
     };
@@ -202,11 +209,12 @@ export default {
   <nut-cell title="Toast 自定义底部高度" is-link @click="textToast('自定义距离')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         center: false,
         bottom: '10%'
       });
@@ -227,11 +235,12 @@ export default {
   <nut-cell title="Loading带透明罩" is-link @click="textToast('加载中')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.loading(msg, {
+    const textToast = (msg) => {
+      showToast.loading(msg, {
         cover: true
       });
     };
@@ -247,10 +256,11 @@ export default {
 
 ###  支持在JS模块中导入使用
 ``` javascript
-import { Toast } from "@nutui/nutui";
-Toast.text('在js模块中使用');
+import { showToast } from "@nutui/nutui";
+import '@nutui/nutui/dist/packages/toast/style';
+showToast.text('在js模块中使用');
 // 返回实例，可以手动调用实例中的hide方法关闭提示
-const toast = Toast.loading('在js模块中使用');
+const toast = showToast.loading('在js模块中使用');
 toast.hide();
 ```
 
@@ -259,12 +269,12 @@ toast.hide();
 ### 方法
 | 方法名        | 说明         | 参数                                 | 返回值                          |
 |---------------|--------------|--------------------------------------|---------------------------------|
-| Toast.text    | 展示文字提示 | message｜ options                    | toast 实例(message支持传入HTML) |
-| Toast.success | 展示成功提示 | message｜ options                    | toast 实例                      |
-| Toast.fail    | 展示失败提示 | message｜ options                    | toast 实例                      |
-| Toast.warn    | 展示警告提示 | message｜ options                    | toast 实例                      |
-| Toast.hide    | 关闭提示     | 默认关闭所有实例，可传id关闭指定实例 | void                            |
-| Toast.loading | 展示加载提示 | message｜ options                    | toast 实例                      |
+| showToast.text    | 展示文字提示 | message｜ options                    | toast 实例(message支持传入HTML) |
+| showToast.success | 展示成功提示 | message｜ options                    | toast 实例                      |
+| showToast.fail    | 展示失败提示 | message｜ options                    | toast 实例                      |
+| showToast.warn    | 展示警告提示 | message｜ options                    | toast 实例                      |
+| showToast.hide    | 关闭提示     | 默认关闭所有实例，可传id关闭指定实例 | void                            |
+| showToast.loading | 展示加载提示 | message｜ options                    | toast 实例                      |
 
 ### ToastOptions 数据结构