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

src/packages/__VUE/dialog/doc.md

@@ -20,29 +20,70 @@ app.use(Dialog).use(Popup).use(OverLay)
 
 ## 函数调用
 
-``` javascript
-Dialog({
-  title: '基础弹框',
-  content: '支持函数调用和组件调用两种方式。'
-});
-
-Dialog({
-  content: '无标题弹框'
-});
-
-Dialog({
-  title: '提示弹框',
-  content: '支持函数调用和组件调用两种方式。',
-  noCancelBtn: true,
-});
-
-Dialog({
-  title: '温馨提示',
-  content: '支持底部按钮纵向排列。',
-  footerDirection:"vertical"
-});
+:::demo
+```html
+<template>
+ <nut-cell-group title="函数式调用">
+  <nut-cell title="基础弹框" @click="baseClick"></nut-cell>
+  <nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
+  <nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
+  <nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
+</nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Dialog } from '@nutui/nutui';
+export default {
+    setup() {
+        const onCancel = () => {
+          console.log('event cancel');
+        };
+        const onOk = () => {
+          console.log('event ok');
+        };
+        const baseClick = (): void => {
+          Dialog({
+            title: '基础弹框',
+            content: '支持函数调用和组件调用两种方式。',
+            onCancel,
+            onOk
+          });
+        };
+        const noTitleClick = () => {
+          Dialog({
+            content: '无标题弹框',
+            onCancel,
+            onOk
+          });
+        };
+        const tipsClick = () => {
+          Dialog({
+            title: '温馨提示',
+            content: '支持函数调用和组件调用两种方式。',
+            noCancelBtn: true,
+            onCancel,
+            onOk
+          });
+        };
+        const verticalClick = () => {
+          Dialog({
+            title: '温馨提示',
+            content: '支持底部按钮纵向排列。',
+            footerDirection: 'vertical',
+            onCancel,
+            onOk
+          });
+        };
+        return {
+          baseClick,
+          noTitleClick,
+          tipsClick,
+          verticalClick
+        };
+    }
+}
 ```
-
+::: 
 
 ## teleport 使用，挂载到指定节点
 
@@ -63,35 +104,55 @@ Dialog({
 
 ## 函数调用 proxy.&dialog(...)
 
-``` javascript
+```javascript
+import { ref } from 'vue';
+import { Dialog } from '@nutui/nutui';
 import { getCurrentInstance } from 'vue';
 
-setup(){
-  const { proxy } = getCurrentInstance();
-  proxy.$dialog({
-    title: '基础弹框',
-    content: '支持函数调用和组件调用两种方式。'
-  });
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance();
+    proxy.$dialog({
+      title: '基础弹框',
+      content: '支持函数调用和组件调用两种方式。'
+    });
+  }
 }
 ```
 
 
 ## 标签式组件使用
 
-```html
-<nut-cell title="标签式使用使用" @click="componentClick"></nut-cell>
-<nut-cell title="底部按钮垂直使用" @click="componentvVrticalClick"></nut-cell>
-<nut-dialog title="标签式使用" :close-on-click-overlay="false" content="内容" v-model:visible="visible"></nut-dialog>
-<nut-dialog title="标签式使用" footer-direction="vertical" :close-on-click-overlay="false" content="内容" v-model:visible="visible1"></nut-dialog>
-```
 
-``` javascript
+:::demo
+```html
+<template>
+  <nut-cell-group title="标签式使用">
+    <nut-cell title="组件调用" @click="componentClick"></nut-cell>
+    <nut-dialog
+      teleport="#app"
+      title="组件调用"
+      content="如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。"
+      v-model:visible="visible"
+    >
+    </nut-dialog>
+    <nut-cell title="底部按钮 垂直使用" @click="componentvVrticalClick"></nut-cell>
+    <nut-dialog
+      footer-direction="vertical"
+      teleport="#app"
+      title="组件调用"
+      content="如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。"
+      v-model:visible="visible1"
+    >
+    </nut-dialog>
+  </nut-cell-group>
+</template>
+<script lang="ts">
 import { ref } from 'vue';
-import { Dialog } from '@nutui/nutui';
 export default {
   setup() {
-    const visible = ref(true);
-    const visible1 = ref(true);
+    const visible = ref(false);
+    const visible1 = ref(false);
     const componentClick = () => {
       visible.value = true;
     };
@@ -99,9 +160,10 @@ export default {
       visible1.value = true;
     };
     return { visible,visible1,componentClick,componentvVrticalClick };
-  },
-};
+  }
+}
 ```
+:::
 
 ## API
 | 字段                | 说明                                  | 类型     | 默认值   |

src/packages/__VUE/notify/doc.md

@@ -13,64 +13,101 @@ const app = createApp();
 app.use(Notify);
 ```    
 ## 基本用法
-
-```javascript
+:::demo
+```html
+<template>
+  <nut-cell is-Link @click="baseNotify('基础用法')">基础用法</nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
 export default {
-  mounted() {
-      Notify.text('通知内容', {
-        onClosed() {
+  setup() {
+    const baseNotify = (msg: string) => {
+      Notify.text(msg, {
+        onClose: () => {
           console.log('close');
         },
         onClick: () => {
           console.log('click');
         }
       });
+    };
+    return {
+      baseNotify
+    }
   }
 }
 ```
+:::
 ## 通知类型
-### 主要通知
-```javascript
-    mounted(){
-      Notify.primary('通知内容');
-    }
-```
-### 成功通知
-```javascript
-    mounted(){
-      Notify.success('通知内容');
-    }
-```
-### 危险通知
-```javascript
-    mounted(){
-      Notify.danger('通知内容');
-    }
-```
-### 警告通知
-```javascript
-    mounted(){
-      Notify.warn('通知内容');
+:::demo
+```html
+<template>
+   <nut-cell-group title="通知类型">
+      <nut-cell is-Link @click="primaryNotify('主要通知')">主要通知</nut-cell>
+      <nut-cell is-Link @click="successNotify('成功通知')">成功通知</nut-cell>
+      <nut-cell is-Link @click="errorNotify('危险通知')">危险通知</nut-cell>
+      <nut-cell is-Link @click="warningNotify('警告通知')">警告通知</nut-cell>
+    </nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
+export default {
+  setup() {
+    const primaryNotify = (msg: string) => {
+      Notify.primary(msg);
+    };
+    const successNotify = (msg: string) => {
+      Notify.success(msg);
+    };
+    const errorNotify = (msg: string) => {
+      Notify.danger(msg);
+    };
+    const warningNotify = (msg: string) => {
+      Notify.warn(msg);
+    };
+    return {
+      primaryNotify,
+      successNotify,
+      errorNotify,
+      warningNotify,
     }
+  }
+}
 ```
+:::
 ## 自定义
-### 自定义样式
-```javascript
-    mounted(){
-      Notify.text(val, {
-        color: '#ad0000',
-        background: '#ffe1e1'
-      });
-    }
-```
-### 自定义时长
-```javascript
-    mounted(){
-      Notify.text(val, {
-        duration: 10000
-      });
-    }
+:::demo
+```html
+<template>
+  <nut-cell-group title="自定义样式">
+    <nut-cell is-Link @click="cusBgNotify('自定义背景色和字体颜色')">自定义背景色和字体颜色</nut-cell>
+  </nut-cell-group>
+    <nut-cell-group title="自定义时长">
+      <nut-cell is-Link @click="timeNotify('自定义时长')">自定义时长</nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
+export default {
+  setup() {
+    const cusBgNotify = (msg: string) => {
+      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+    };
+    const timeNotify = (msg: string) => {
+      Notify.text(msg, { duration: 10000 });
+    };
+    return {
+      cusBgNotify,
+      timeNotify
+    };
+  }
+}
 ```
+:::
     
 ## API