|
|
@@ -173,20 +173,40 @@ export default {
|
|
|
|
|
|
### Teleport use, mount to the specified element node
|
|
|
|
|
|
+:::demo
|
|
|
``` 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
|