浏览代码

docs(dialog): demo teleport

eiinu 3 年之前
父节点
当前提交
31036326b9
共有 2 个文件被更改,包括 64 次插入24 次删除
  1. 32 12
      src/packages/__VUE/dialog/doc.en-US.md
  2. 32 12
      src/packages/__VUE/dialog/doc.md

+ 32 - 12
src/packages/__VUE/dialog/doc.en-US.md

@@ -173,20 +173,40 @@ export default {
 
 
 ### Teleport use, mount to the specified element node
 ### Teleport use, mount to the specified element node
 
 
+:::demo
 ``` html
 ``` html
-<nut-dialog teleport="#app" ... />
-```
-
-``` javascript
-showDialog({
-  teleport: '#app',
-  ...
-});
-showDialog({
-  teleport: '.demo',
-  ...
-});
+<template>
+  <nut-cell-group title="Teleport use, mount to the specified element node">
+    <nut-cell title="body element node" @click="teleportClick('body')"></nut-cell>
+    <nut-cell title="#app element node" @click="teleportClick('#app')"></nut-cell>
+    <nut-cell title="demo class element node" @click="teleportClick('.demo')"></nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+export default {
+  setup() {
+    const onCancel = () => {
+      console.log('event cancel');
+    };
+    const teleportClick = (teleport: string) => {
+      showDialog({
+        teleport,
+        title: 'teleport to ' + teleport,
+        content: 'Open the developer tool and take a look at the Elements tab',
+        noCancelBtn: true,
+        onCancel
+      });
+    };
+    return {
+      teleportClick
+    }
+  }
+}
+</script>
 ```
 ```
+:::
 
 
 
 
 ## API
 ## API

+ 32 - 12
src/packages/__VUE/dialog/doc.md

@@ -172,20 +172,40 @@ export default {
 
 
 ### teleport 使用,挂载到指定节点
 ### teleport 使用,挂载到指定节点
 
 
+:::demo
 ``` html
 ``` html
-<nut-dialog teleport="#app" ... />
-```
-
-``` javascript
-showDialog({
-  teleport: '#app',
-  ...
-});
-showDialog({
-  teleport: '.demo',
-  ...
-});
+<template>
+  <nut-cell-group title="Teleport 使用,挂载到指定节点">
+    <nut-cell title="body element node" @click="teleportClick('body')"></nut-cell>
+    <nut-cell title="#app element node" @click="teleportClick('#app')"></nut-cell>
+    <nut-cell title="demo class element node" @click="teleportClick('.demo')"></nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+export default {
+  setup() {
+    const onCancel = () => {
+      console.log('event cancel');
+    };
+    const teleportClick = (teleport: string) => {
+      showDialog({
+        teleport,
+        title: 'teleport to ' + teleport,
+        content: '打开开发者工具看一下 Elements Tab',
+        noCancelBtn: true,
+        onCancel
+      });
+    };
+    return {
+      teleportClick
+    }
+  }
+}
+</script>
 ```
 ```
+:::
 ## API
 ## API
 ### DialogOptions
 ### DialogOptions
 | 参数                | 说明                                                          | 类型                     | 默认值               |
 | 参数                | 说明                                                          | 类型                     | 默认值               |