From 2f641f0a67cc2f3f262999fe30d50d659abffd8a Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Tue, 30 Jan 2024 15:21:04 +0800
Subject: [PATCH] chore(popup): split demo (#2899)

---
 .../src/basic/pages/popup/basic.vue           |   8 +
 .../src/basic/pages/popup/close.vue           |  27 ++++
 .../src/basic/pages/popup/index.vue           |  99 +++++-------
 .../src/basic/pages/popup/multi.vue           |  12 ++
 .../src/basic/pages/popup/position.vue        |  20 +++
 .../src/basic/pages/popup/round.vue           |   8 +
 src/packages/__VUE/popup/demo.vue             | 120 ---------------
 src/packages/__VUE/popup/demo/basic.vue       |   8 +
 src/packages/__VUE/popup/demo/close.vue       |  27 ++++
 src/packages/__VUE/popup/demo/index.vue       |  50 ++++++
 src/packages/__VUE/popup/demo/multi.vue       |  12 ++
 src/packages/__VUE/popup/demo/port.vue        |  10 ++
 src/packages/__VUE/popup/demo/position.vue    |  20 +++
 src/packages/__VUE/popup/demo/round.vue       |   8 +
 src/packages/__VUE/popup/doc.en-US.md         | 145 ++----------------
 src/packages/__VUE/popup/doc.md               | 140 ++---------------
 src/packages/__VUE/popup/doc.taro.md          | 117 +-------------
 src/packages/__VUE/timeselect/doc.en-US.md    |   1 -
 src/packages/__VUE/timeselect/doc.md          |   1 -
 19 files changed, 279 insertions(+), 554 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/basic/pages/popup/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/basic/pages/popup/close.vue
 create mode 100644 packages/nutui-taro-demo/src/basic/pages/popup/multi.vue
 create mode 100644 packages/nutui-taro-demo/src/basic/pages/popup/position.vue
 create mode 100644 packages/nutui-taro-demo/src/basic/pages/popup/round.vue
 delete mode 100644 src/packages/__VUE/popup/demo.vue
 create mode 100644 src/packages/__VUE/popup/demo/basic.vue
 create mode 100644 src/packages/__VUE/popup/demo/close.vue
 create mode 100644 src/packages/__VUE/popup/demo/index.vue
 create mode 100644 src/packages/__VUE/popup/demo/multi.vue
 create mode 100644 src/packages/__VUE/popup/demo/port.vue
 create mode 100644 src/packages/__VUE/popup/demo/position.vue
 create mode 100644 src/packages/__VUE/popup/demo/round.vue

diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/basic.vue b/packages/nutui-taro-demo/src/basic/pages/popup/basic.vue
new file mode 100644
index 0000000000..50a71d1055
--- /dev/null
+++ b/packages/nutui-taro-demo/src/basic/pages/popup/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Center" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" :style="{ padding: '30px 50px' }"> 正文 </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/close.vue b/packages/nutui-taro-demo/src/basic/pages/popup/close.vue
new file mode 100644
index 0000000000..d3ae643108
--- /dev/null
+++ b/packages/nutui-taro-demo/src/basic/pages/popup/close.vue
@@ -0,0 +1,27 @@
+<template>
+  <nut-cell title="Closeable" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Close Icon Position" is-link @click="show2 = true"></nut-cell>
+  <nut-popup
+    v-model:visible="show2"
+    position="bottom"
+    closeable
+    close-icon-position="top-left"
+    :style="{ height: '20%' }"
+  ></nut-popup>
+
+  <nut-cell title="Close Icon Slot" is-link @click="show3 = true"></nut-cell>
+  <nut-popup v-model:visible="show3" position="bottom" closeable :style="{ height: '20%' }">
+    <template #close-icon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Heart } from '@nutui/icons-vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const show3 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/index.vue b/packages/nutui-taro-demo/src/basic/pages/popup/index.vue
index 2cd617ce67..765683f0d3 100644
--- a/packages/nutui-taro-demo/src/basic/pages/popup/index.vue
+++ b/packages/nutui-taro-demo/src/basic/pages/popup/index.vue
@@ -1,75 +1,46 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell title="展示弹出层" is-link @click="showBasic = true"></nut-cell>
-    <nut-popup v-model:visible="showBasic" pop-class="popclass" :style="{ padding: '30px 50px' }" :z-index="100">
-      正文
-    </nut-popup>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>弹出位置</h2>
-    <nut-cell title="顶部弹出" is-link @click="showTop = true"></nut-cell>
-    <nut-popup v-model:visible="showTop" position="top" :style="{ height: '10%' }"></nut-popup>
+    <h2>{{ t('position') }}</h2>
+    <Position />
 
-    <nut-cell title="底部弹出" is-link @click="showBottom = true"></nut-cell>
-    <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
+    <h2>{{ t('close') }}</h2>
+    <Close />
 
-    <nut-cell title="左侧弹出" is-link @click="showLeft = true"></nut-cell>
-    <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
+    <h2>{{ t('round') }}</h2>
+    <Round />
 
-    <nut-cell title="右侧弹出" is-link @click="showRight = true"></nut-cell>
-    <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
-
-    <h2>关闭图标</h2>
-    <nut-cell title="关闭图标" is-link @click="showIcon = true"></nut-cell>
-    <nut-popup v-model:visible="showIcon" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
-
-    <nut-cell title="图标位置" is-link @click="showIconPosition = true"></nut-cell>
-    <nut-popup
-      v-model:visible="showIconPosition"
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-    ></nut-popup>
-
-    <nut-cell title="自定义图标" is-link @click="showCloseIcon = true"></nut-cell>
-    <nut-popup
-      v-model:visible="showCloseIcon"
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-    >
-      <template #close-icon>
-        <Heart></Heart>
-      </template>
-    </nut-popup>
-
-    <h2>圆角弹框</h2>
-    <nut-cell title="圆角弹框" is-link @click="showRound = true"></nut-cell>
-    <nut-popup v-model:visible="showRound" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
-
-    <h2>多层堆叠</h2>
-    <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
-    <nut-popup v-model:visible="showPop1" :style="{ padding: '30px 50px' }">
-      <div @click="showPop2 = true">点击它</div>
-    </nut-popup>
-    <nut-popup v-model:visible="showPop2" :style="{ padding: '30px 50px' }">正文</nut-popup>
+    <h2>{{ t('muti') }}</h2>
+    <Multi />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Heart } from '@nutui/icons-vue-taro';
-const showBasic = ref(false);
-const showTop = ref(false);
-const showBottom = ref(false);
-const showLeft = ref(false);
-const showRight = ref(false);
-const showIcon = ref(false);
-const showIconPosition = ref(false);
-const showCloseIcon = ref(false);
-const showRound = ref(false);
-const showPop1 = ref(false);
-const showPop2 = ref(false);
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Position from './position.vue';
+import Close from './close.vue';
+import Round from './round.vue';
+import Multi from './multi.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    position: '弹出位置',
+    close: '关闭图标',
+    round: '圆角弹框',
+    muti: '多层堆叠',
+    teleport: '指定挂载节点'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    position: 'Position',
+    close: 'Close Icon',
+    round: 'Round Popup',
+    muti: 'Multi Layers',
+    teleport: 'Teleport'
+  }
+});
 </script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/multi.vue b/packages/nutui-taro-demo/src/basic/pages/popup/multi.vue
new file mode 100644
index 0000000000..9d7d96ce54
--- /dev/null
+++ b/packages/nutui-taro-demo/src/basic/pages/popup/multi.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="Layers" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" :style="{ padding: '30px 50px' }">
+    <div @click="show2 = true">点击它</div>
+  </nut-popup>
+  <nut-popup v-model:visible="show2" :style="{ padding: '30px 50px' }">正文</nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show1 = ref(false);
+const show2 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/position.vue b/packages/nutui-taro-demo/src/basic/pages/popup/position.vue
new file mode 100644
index 0000000000..099ed410b2
--- /dev/null
+++ b/packages/nutui-taro-demo/src/basic/pages/popup/position.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-cell title="Top" is-link @click="showTop = true"></nut-cell>
+  <nut-popup v-model:visible="showTop" position="top" :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Bottom" is-link @click="showBottom = true"></nut-cell>
+  <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Left" is-link @click="showLeft = true"></nut-cell>
+  <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
+
+  <nut-cell title="Right" is-link @click="showRight = true"></nut-cell>
+  <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const showTop = ref(false);
+const showBottom = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/round.vue b/packages/nutui-taro-demo/src/basic/pages/popup/round.vue
new file mode 100644
index 0000000000..56e9569ad5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/basic/pages/popup/round.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Round" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo.vue b/src/packages/__VUE/popup/demo.vue
deleted file mode 100644
index b428df9d94..0000000000
--- a/src/packages/__VUE/popup/demo.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="demo">
-    <div id="test"></div>
-    <h2>{{ translate('basic') }}</h2>
-    <nut-cell :title="translate('cell1')" is-link @click="showBasic = true"></nut-cell>
-    <nut-popup v-model:visible="showBasic" pop-class="popclass" :style="{ padding: '30px 50px' }" :z-index="100">
-      {{ translate('text') }}
-    </nut-popup>
-
-    <h2>{{ translate('position') }}</h2>
-    <nut-cell :title="translate('cell2')" is-link @click="showTop = true"></nut-cell>
-    <nut-popup v-model:visible="showTop" position="top" :style="{ height: '20%' }"></nut-popup>
-
-    <nut-cell :title="translate('cell3')" is-link @click="showBottom = true"></nut-cell>
-    <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
-
-    <nut-cell :title="translate('cell4')" is-link @click="showLeft = true"></nut-cell>
-    <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
-
-    <nut-cell :title="translate('cell5')" is-link @click="showRight = true"></nut-cell>
-    <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
-
-    <h2>{{ translate('close') }}</h2>
-    <nut-cell :title="translate('close')" is-link @click="showIcon = true"></nut-cell>
-    <nut-popup v-model:visible="showIcon" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
-
-    <nut-cell :title="translate('iposition')" is-link @click="showIconPosition = true"></nut-cell>
-    <nut-popup
-      v-model:visible="showIconPosition"
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-    ></nut-popup>
-
-    <nut-cell :title="translate('cicon')" is-link @click="showCloseIcon = true"></nut-cell>
-    <nut-popup
-      v-model:visible="showCloseIcon"
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-    >
-      <template #close-icon>
-        <Heart></Heart>
-      </template>
-    </nut-popup>
-
-    <h2>{{ translate('circle') }}</h2>
-    <nut-cell :title="translate('circle')" is-link @click="showRound = true"></nut-cell>
-    <nut-popup v-model:visible="showRound" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
-
-    <h2>{{ translate('teleport') }}</h2>
-    <nut-cell :title="translate('teleport')" is-link @click="showTeleport = true"></nut-cell>
-    <nut-popup v-model:visible="showTeleport" :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable>
-      app
-    </nut-popup>
-
-    <h2>{{ translate('muti') }}</h2>
-    <nut-cell :title="translate('muti')" is-link @click="showPop1 = true"></nut-cell>
-    <nut-popup v-model:visible="showPop1" :style="{ padding: '30px 50px' }">
-      <div @click="showPop2 = true">{{ translate('click') }}</div>
-    </nut-popup>
-    <nut-popup v-model:visible="showPop2" :style="{ padding: '30px 50px' }">{{ translate('text') }}</nut-popup>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Heart } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    cell1: '展示弹出层',
-    text: '正文',
-    position: '弹出位置',
-    cell2: '顶部弹出',
-    cell3: '底部弹出',
-    cell4: '左侧弹出',
-    cell5: '右侧弹出',
-    close: '关闭图标',
-    iposition: '图标位置',
-    cicon: '自定义图标',
-    circle: '圆角弹框',
-    teleport: '指定挂载节点',
-    muti: '多层堆叠',
-    click: '点击它'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    cell1: 'Show pop-up layer',
-    text: 'text',
-    position: 'Eject position',
-    cell2: 'Top pop-up',
-    cell3: 'Bottom pop-up',
-    cell4: 'Left pop-up',
-    cell5: 'Right pop-up',
-    close: 'Close icon',
-    iposition: 'Icon location',
-    cicon: 'Custom icon',
-    circle: 'Rounded bullet frame',
-    teleport: 'Specify mount node',
-    muti: 'Multi stack',
-    click: 'Click it'
-  }
-});
-const showBasic = ref(false);
-const showTop = ref(false);
-const showBottom = ref(false);
-const showLeft = ref(false);
-const showRight = ref(false);
-const showIcon = ref(false);
-const showIconPosition = ref(false);
-const showCloseIcon = ref(false);
-const showRound = ref(false);
-const showPop1 = ref(false);
-const showPop2 = ref(false);
-const showTeleport = ref(false);
-</script>
diff --git a/src/packages/__VUE/popup/demo/basic.vue b/src/packages/__VUE/popup/demo/basic.vue
new file mode 100644
index 0000000000..50a71d1055
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Center" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" :style="{ padding: '30px 50px' }"> 正文 </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/close.vue b/src/packages/__VUE/popup/demo/close.vue
new file mode 100644
index 0000000000..d3ae643108
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/close.vue
@@ -0,0 +1,27 @@
+<template>
+  <nut-cell title="Closeable" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Close Icon Position" is-link @click="show2 = true"></nut-cell>
+  <nut-popup
+    v-model:visible="show2"
+    position="bottom"
+    closeable
+    close-icon-position="top-left"
+    :style="{ height: '20%' }"
+  ></nut-popup>
+
+  <nut-cell title="Close Icon Slot" is-link @click="show3 = true"></nut-cell>
+  <nut-popup v-model:visible="show3" position="bottom" closeable :style="{ height: '20%' }">
+    <template #close-icon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Heart } from '@nutui/icons-vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const show3 = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/index.vue b/src/packages/__VUE/popup/demo/index.vue
new file mode 100644
index 0000000000..c7c942a798
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('close') }}</h2>
+    <Close />
+
+    <h2>{{ t('round') }}</h2>
+    <Round />
+
+    <h2>{{ t('muti') }}</h2>
+    <Multi />
+
+    <h2>{{ t('port') }}</h2>
+    <Port />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Position from './position.vue';
+import Close from './close.vue';
+import Round from './round.vue';
+import Multi from './multi.vue';
+import Port from './port.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    position: '弹出位置',
+    close: '关闭图标',
+    round: '圆角弹框',
+    muti: '多层堆叠',
+    port: '指定挂载节点'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    position: 'Position',
+    close: 'Close Icon',
+    round: 'Round Popup',
+    muti: 'Multi Layers',
+    port: 'Teleport'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/popup/demo/multi.vue b/src/packages/__VUE/popup/demo/multi.vue
new file mode 100644
index 0000000000..9d7d96ce54
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/multi.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="Layers" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" :style="{ padding: '30px 50px' }">
+    <div @click="show2 = true">点击它</div>
+  </nut-popup>
+  <nut-popup v-model:visible="show2" :style="{ padding: '30px 50px' }">正文</nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show1 = ref(false);
+const show2 = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/port.vue b/src/packages/__VUE/popup/demo/port.vue
new file mode 100644
index 0000000000..b1adadcd0c
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/port.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell title="Teleport" is-link @click="show = true"></nut-cell>
+  <Teleport to="#app">
+    <nut-popup v-model:visible="show" :style="{ padding: '30px 50px' }"> app </nut-popup>
+  </Teleport>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/position.vue b/src/packages/__VUE/popup/demo/position.vue
new file mode 100644
index 0000000000..099ed410b2
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/position.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-cell title="Top" is-link @click="showTop = true"></nut-cell>
+  <nut-popup v-model:visible="showTop" position="top" :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Bottom" is-link @click="showBottom = true"></nut-cell>
+  <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Left" is-link @click="showLeft = true"></nut-cell>
+  <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
+
+  <nut-cell title="Right" is-link @click="showRight = true"></nut-cell>
+  <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const showTop = ref(false);
+const showBottom = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/round.vue b/src/packages/__VUE/popup/demo/round.vue
new file mode 100644
index 0000000000..56e9569ad5
--- /dev/null
+++ b/src/packages/__VUE/popup/demo/round.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Round" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/doc.en-US.md b/src/packages/__VUE/popup/doc.en-US.md
index af4683ca8b..e199cdc54e 100644
--- a/src/packages/__VUE/popup/doc.en-US.md
+++ b/src/packages/__VUE/popup/doc.en-US.md
@@ -18,152 +18,35 @@ app.use(Popup);
 
 Control display/hide by setting `visible`
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Display pop-up layer" is-link @click="showBasic = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showBasic">text</nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
-
-:::
+> demo: popup basic
 
-### Eject position
+### Position
 
 Control the pop-up position by setting the value of `position`
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Top Eject" is-link @click="showTop = true"></nut-cell>
-  <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="showTop"></nut-popup>
-  <nut-cell title="Bottom Eject" is-link @click="showBottom = true"></nut-cell>
-  <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="showBottom"></nut-popup>
-  <nut-cell title="Left Eject" is-link @click="showLeft = true"></nut-cell>
-  <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="showLeft"></nut-popup>
-  <nut-cell title="Right Eject" is-link @click="showRight = true"></nut-cell>
-  <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="showRight"></nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const showTop = ref(false);
-const showBottom = ref(false);
-const showLeft = ref(false);
-const showRight = ref(false);
-</script>
-```
-
-:::
+> demo: popup position
 
-### Icon
+### Close Icon
 
 The `closeable` controls whether the icon can be closed. The `close-icon-position` sets the position of the icon. The `close-icon` defines the display icon.
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="close icon" is-link @click="showIcon = true"></nut-cell>
-  <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="showIcon"></nut-popup>
-  <nut-cell title="icon position" is-link @click="showIconPosition = true"></nut-cell>
-  <nut-popup
-    position="bottom"
-    closeable
-    close-icon-position="top-left"
-    :style="{ height: '20%' }"
-    v-model:visible="showIconPosition"
-  ></nut-popup>
-  <nut-cell title="custom icon" is-link @click="showCloseIcon = true"></nut-cell>
-  <nut-popup
-    position="bottom"
-    closeable
-    close-icon-position="top-left"
-    close-icon="heart"
-    :style="{ height: '20%' }"
-    v-model:visible="showCloseIcon"
-  >
-    <template #close-icon>
-      <Heart></Heart>
-    </template>
-  </nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Heart } from '@nutui/icons-vue';
-const showIcon = ref(false);
-const showIconPosition = ref(false);
-const showCloseIcon = ref(false);
-</script>
-```
-
-:::
+> demo: popup close
 
-### Rounded bullet frame
+### Round
 
 Set `round` to control whether rounded corners are displayed
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="rounded pop-up" is-link @click="showRound = true"></nut-cell>
-  <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
+> demo: popup round
 
-:::
+### Multi Layers
 
-### Specify mount node
+> demo: popup multi
 
-Specify the mount node through `teleport`
+### Teleport
 
-:::demo
+Use the [Teleport](https://vuejs.org/guide/built-ins/teleport.html) component provided by Vue to implement specified node mounting.
 
-```vue
-<template>
-  <nut-cell title="Specify mount node" is-link @click="showTeleport = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport"
-    >app</nut-popup
-  >
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
-
-:::
-
-### Multi stack
-
-:::demo
-
-```vue
-<template>
-  <nut-cell title="Multi stack" is-link @click="showPop1 = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
-    <div @click="showPop2 = true">Click it</div>
-  </nut-popup>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop2">Text</nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const showPop1 = ref(false);
-const showPop2 = ref(false);
-</script>
-```
-
-:::
+> demo: popup port
 
 ## API
 
@@ -185,11 +68,11 @@ const showPop2 = ref(false);
 | close-icon-position | Close button position（top-left,top-right,bottom-left,bottom-right） | string | `"top-right"` |
 | destroy-on-close | Will the contents of `slot` be cleared after the bullet layer is closed | boolean | `true` |
 | round | Show fillet | boolean | `false` |
-| teleport | Specify the mount node | string | `"body"` |
-| teleport-disable | Whether the node is allowed to be mounted, true means mount | boolean | `false` |
 | overlay-class | Custom mask class name | string | - |
 | overlay-style | Custom Mask Style | CSSProperties | - |
 | safe-area-inset-bottom | Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is `bottom` | Boolean | `false` |
+| teleport | Specify the mount node | string | `"body"` |
+| teleport-disable | Whether the node is allowed to be mounted, true means mount | boolean | `false` |
 
 ### Events
 
diff --git a/src/packages/__VUE/popup/doc.md b/src/packages/__VUE/popup/doc.md
index 142f7f5a58..f1676d7476 100644
--- a/src/packages/__VUE/popup/doc.md
+++ b/src/packages/__VUE/popup/doc.md
@@ -18,149 +18,35 @@ app.use(Popup);
 
 通过设置 `visible` 控制显示/隐藏
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="展示弹出层" is-link @click="show = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">正文</nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
-
-:::
+> demo: popup basic
 
 ### 弹出位置
 
 通过设置 `position` 的值来控制弹出位置
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="顶部弹出" is-link @click="showTop = true"></nut-cell>
-  <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="showTop"></nut-popup>
-  <nut-cell title="底部弹出" is-link @click="showBottom = true"></nut-cell>
-  <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="showBottom"></nut-popup>
-  <nut-cell title="左侧弹出" is-link @click="showLeft = true"></nut-cell>
-  <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="showLeft"></nut-popup>
-  <nut-cell title="右侧弹出" is-link @click="showRight = true"></nut-cell>
-  <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="showRight"></nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const showTop = ref(false);
-const showBottom = ref(false);
-const showLeft = ref(false);
-const showRight = ref(false);
-</script>
-```
-
-:::
+> demo: popup position
 
 ### 图标
 
-通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`close-icon` 来自定义显示图标
-
-:::demo
-
-```vue
-<template>
-  <nut-cell title="关闭图标" is-link @click="showIcon = true"></nut-cell>
-  <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="showIcon"></nut-popup>
-  <nut-cell title="图标位置" is-link @click="showIconPosition = true"></nut-cell>
-  <nut-popup
-    position="bottom"
-    closeable
-    close-icon-position="top-left"
-    :style="{ height: '20%' }"
-    v-model:visible="showIconPosition"
-  ></nut-popup>
-  <nut-cell title="自定义图标" is-link @click="showCloseIcon = true"></nut-cell>
-  <nut-popup
-    position="bottom"
-    closeable
-    close-icon-position="top-left"
-    :style="{ height: '20%' }"
-    v-model:visible="showCloseIcon"
-  >
-    <template #close-icon>
-      <Heart></Heart>
-    </template>
-  </nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Heart } from '@nutui/icons-vue';
-const showIcon = ref(false);
-const showIconPosition = ref(false);
-const showCloseIcon = ref(false);
-</script>
-```
+通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`close-icon` 插槽自定义显示图标
 
-:::
+> demo: popup close
 
 ### 圆角弹框
 
 通过设置 `round` 来控制是否显示圆角
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="圆角弹框" is-link @click="show = true"></nut-cell>
-  <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="show"></nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
-
-:::
-
-### 指定挂载节点
-
-通过 `teleport` 来指定挂载节点
+> demo: popup round
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="指定挂载节点" is-link @click="show = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="show"> app </nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
+### 多层堆叠
 
-:::
+> demo: popup multi
 
-### 多层堆叠
+### 指定挂载节点
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
-    <div @click="showPop2 = true">点击它</div>
-  </nut-popup>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop2">正文</nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const showPop1 = ref(false);
-const showPop2 = ref(false);
-</script>
-```
+使用 Vue 提供的 [Teleport](https://cn.vuejs.org/guide/built-ins/teleport.html) 组件实现指定节点挂载。
 
-:::
+> demo: popup port
 
 ## API
 
@@ -182,11 +68,11 @@ const showPop2 = ref(false);
 | close-icon-position | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | string | `"top-right"` |
 | destroy-on-close | 弹层关闭后 `slot`内容会不会清空 | boolean | `true` |
 | round | 是否显示圆角 | boolean | `false` |
-| teleport | 指定挂载节点 | string | `"body"` |
-| teleport-disable | 是否挂载节点，false 不挂载，true 挂载 | boolean | `false` |
 | overlay-class | 自定义遮罩层类名 | string | '' |
 | overlay-style | 自定义遮罩层样式 | string | '' |
-| safe-area-inset-bottom | 是否开启 `iphone` 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 | boolean | `false` |
+| safe-area-inset-bottom | 是否开启全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 | boolean | `false` |
+| teleport | 指定挂载节点 | string | `"body"` |
+| teleport-disable | 是否挂载节点，false 不挂载，true 挂载 | boolean | `false` |
 
 ### Events
 
diff --git a/src/packages/__VUE/popup/doc.taro.md b/src/packages/__VUE/popup/doc.taro.md
index d447571bd3..7557d06818 100644
--- a/src/packages/__VUE/popup/doc.taro.md
+++ b/src/packages/__VUE/popup/doc.taro.md
@@ -18,132 +18,29 @@ app.use(Popup);
 
 通过设置 `visible` 控制显示/隐藏
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="展示弹出层" is-link @click="show = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">正文</nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
-
-:::
+> demo: popup basic basic
 
 ### 弹出位置
 
 通过设置 `position` 的值来控制弹出位置
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="顶部弹出" is-link @click="showTop = true"></nut-cell>
-  <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="showTop"></nut-popup>
-  <nut-cell title="底部弹出" is-link @click="showBottom = true"></nut-cell>
-  <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="showBottom"></nut-popup>
-  <nut-cell title="左侧弹出" is-link @click="showLeft = true"></nut-cell>
-  <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="showLeft"></nut-popup>
-  <nut-cell title="右侧弹出" is-link @click="showRight = true"></nut-cell>
-  <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="showRight"></nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const showTop = ref(false);
-const showBottom = ref(false);
-const showLeft = ref(false);
-const showRight = ref(false);
-</script>
-```
-
-:::
+> demo: popup position basic
 
 ### 图标
 
-通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`close-icon` 来自定义显示图标
+通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`close-icon` 插槽自定义显示图标
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="关闭图标" is-link @click="showIcon = true"></nut-cell>
-  <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="showIcon"></nut-popup>
-  <nut-cell title="图标位置" is-link @click="showIconPosition = true"></nut-cell>
-  <nut-popup
-    position="bottom"
-    closeable
-    close-icon-position="top-left"
-    :style="{ height: '20%' }"
-    v-model:visible="showIconPosition"
-  ></nut-popup>
-  <nut-cell title="自定义图标" is-link @click="showCloseIcon = true"></nut-cell>
-  <nut-popup
-    position="bottom"
-    closeable
-    close-icon-position="top-left"
-    :style="{ height: '20%' }"
-    v-model:visible="showCloseIcon"
-  >
-    <template #close-icon>
-      <Heart></Heart>
-    </template>
-  </nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Heart } from '@nutui/icons-vue-taro';
-const showIcon = ref(false);
-const showIconPosition = ref(false);
-const showCloseIcon = ref(false);
-</script>
-```
-
-:::
+> demo: popup close basic
 
 ### 圆角弹框
 
 通过设置 `round` 来控制是否显示圆角
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="圆角弹框" is-link @click="show = true"></nut-cell>
-  <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="show"></nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-```
-
-:::
-
-:::
+> demo: popup round basic
 
 ### 多层堆叠
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
-    <div @click="showPop2 = true">点击它</div>
-  </nut-popup>
-  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop2">正文</nut-popup>
-</template>
-<script setup>
-import { ref } from 'vue';
-const showPop1 = ref(false);
-const showPop2 = ref(false);
-</script>
-```
-
-:::
+> demo: popup multi basic
 
 ### 禁止滚动穿透
 
@@ -197,7 +94,7 @@ const showPop2 = ref(false);
 | round | 是否显示圆角 | boolean | `false` |
 | overlay-class | 自定义遮罩层类名 | string | '' |
 | overlay-style | 自定义遮罩层样式 | string | '' |
-| safe-area-inset-bottom | 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 | boolean | `false` |
+| safe-area-inset-bottom | 是否开启全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 | boolean | `false` |
 
 ### Events
 
diff --git a/src/packages/__VUE/timeselect/doc.en-US.md b/src/packages/__VUE/timeselect/doc.en-US.md
index afa36cc216..5041c291bc 100644
--- a/src/packages/__VUE/timeselect/doc.en-US.md
+++ b/src/packages/__VUE/timeselect/doc.en-US.md
@@ -40,7 +40,6 @@ app.use(TimeDetail);
 | current-key | Unique identification | string \| number | `0` |
 | current-time | The currently selected time, the array element contains:key: string; list: string[] | Array | `[]` |
 | lock-scroll | Whether the background is locked | boolean | `true` |
-| teleport-disable | Whether the node is allowed to be mounted | boolean | `false` |
 
 ### Slots
 
diff --git a/src/packages/__VUE/timeselect/doc.md b/src/packages/__VUE/timeselect/doc.md
index 8abc1497ad..633bb54ad7 100644
--- a/src/packages/__VUE/timeselect/doc.md
+++ b/src/packages/__VUE/timeselect/doc.md
@@ -40,7 +40,6 @@ app.use(TimeDetail);
 | current-key | 唯一标识 | string \| number | `0` |
 | current-time | 当前选择的时间，数组元素包含:key: string; list: string[] | Array | `[]` |
 | lock-scroll | 背景是否锁定 | boolean | `true` |
-| teleport-disable | 是否允许挂载节点 | boolean | `false` |
 
 ### Slots