diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/basic.vue
new file mode 100644
index 0000000000..8f89dd3063
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/basic.vue
@@ -0,0 +1,39 @@
+<template>
+  <nut-space>
+    <nut-popover v-model:visible="show1" :list="list" location="bottom-start" @choose="choose">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Light </nut-button>
+      </template>
+    </nut-popover>
+    <nut-popover v-model:visible="show2" :list="list" theme="dark" location="bottom-start">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Dark </nut-button>
+      </template>
+    </nut-popover>
+  </nut-space>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const list = ref([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  },
+  {
+    name: 'option3'
+  }
+]);
+const choose = (item: unknown, index: number) => {
+  console.log(item, index);
+};
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/color.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/color.vue
new file mode 100644
index 0000000000..1590a3b293
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/color.vue
@@ -0,0 +1,31 @@
+<template>
+  <nut-popover v-model:visible="show" :list="list" theme="dark" bg-color="#f00" @choose="choose">
+    <template #reference>
+      <nut-button type="primary" shape="square"> Light </nut-button>
+    </template>
+  </nut-popover>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const list = ref([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  },
+  {
+    name: 'option3'
+  }
+]);
+const choose = (item: unknown, index: number) => {
+  console.log(item, index);
+};
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/content.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/content.vue
new file mode 100644
index 0000000000..eba44dfc3d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/content.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-popover v-model:visible="show" location="right">
+    <template #reference>
+      <nut-button type="primary" shape="square"> Content </nut-button>
+    </template>
+
+    <template #content>
+      <div> Custom Content Custom Content </div>
+      <div> Custom Content Custom Content </div>
+    </template>
+  </nut-popover>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
index b8885b6eb8..93e4062953 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
@@ -1,325 +1,49 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-row type="flex">
-      <nut-col :span="8">
-        <nut-popover
-          v-model:visible="state.lightTheme"
-          :list="iconItemList"
-          location="bottom-start"
-          custom-class="popover-demo-custom"
-          @choose="chooseItem"
-        >
-          <template #reference>
-            <nut-button type="primary" shape="square">明朗风格</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-      <nut-col :span="8">
-        <nut-popover
-          v-model:visible="state.darkTheme"
-          theme="dark"
-          :list="iconItemList"
-          custom-class="popover-demo-custom"
-        >
-          <template #reference>
-            <nut-button type="primary" shape="square">暗黑风格</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-    </nut-row>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>选项配置</h2>
-    <nut-row type="flex">
-      <nut-col :span="8">
-        <nut-popover v-model:visible="state.showIcon" theme="dark" :list="itemList" custom-class="popover-demo-custom">
-          <template #reference>
-            <nut-button type="primary" shape="square">展示图标</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-      <nut-col :span="8">
-        <nut-popover
-          v-model:visible="state.disableAction"
-          :list="itemListDisabled"
-          location="right-start"
-          custom-class="popover-demo-custom"
-        >
-          <template #reference>
-            <nut-button type="primary" shape="square">禁用选项</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-    </nut-row>
+    <h2>{{ t('option') }}</h2>
+    <Option />
 
-    <h2>自定义内容</h2>
-    <nut-popover v-model:visible="state.Customized" location="top-start" custom-class="customClass">
-      <template #reference>
-        <nut-button type="primary" shape="square">自定义内容</nut-button>
-      </template>
+    <h2>{{ t('content') }}</h2>
+    <Content />
 
-      <template #content>
-        <div class="self-content">
-          <div v-for="(item, index) in selfContent" :key="index" class="self-content-item">
-            <!-- <component :is="renderIcon(item.name)"></component> -->
-            <Service />
-            <div class="self-content-desc">{{ item.desc }}</div>
-          </div>
-        </div>
-      </template>
-    </nut-popover>
+    <h2>{{ t('position') }}</h2>
+    <Position />
 
-    <h2>位置自定义</h2>
-    <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+    <h2>{{ t('target') }}</h2>
+    <Target />
 
-    <nut-popup v-model:visible="state.showPicker" position="bottom" custom-class="popover-demo-custom">
-      <nut-picker
-        :columns="columns"
-        title=""
-        :swipe-duration="500"
-        @change="change"
-        @confirm="closePicker"
-        @close="closePicker"
-      >
-        <template #top>
-          <div class="brickBox">
-            <div id="pickerTarget" class="brick"></div>
-          </div>
-        </template>
-      </nut-picker>
-    </nut-popup>
-
-    <nut-popover
-      v-model:visible="state.customPositon"
-      target-id="pickerTarget"
-      :location="curPostion"
-      theme="dark"
-      :list="positionList"
-      custom-class="popover-demo-custom"
-    >
-    </nut-popover>
-
-    <h2>自定义目标元素</h2>
-    <nut-button id="popid" type="primary" shape="square" @click="clickCustomHandle"> 自定义对象 </nut-button>
-    <nut-popover
-      v-model:visible="state.customTarget"
-      target-id="popid"
-      :list="iconItemList"
-      location="top-start"
-      custom-class="popover-demo-custom"
-    ></nut-popover>
-
-    <h2>自定义颜色</h2>
-
-    <nut-popover
-      v-model:visible="state.customColor"
-      :list="iconItemList"
-      location="right-start"
-      bg-color="#f00"
-      theme="dark"
-      custom-class="popover-demo-custom"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">自定义颜色</nut-button>
-      </template>
-    </nut-popover>
+    <h2>{{ t('color') }}</h2>
+    <Color />
   </Demo>
 </template>
 <script setup lang="ts">
-import { reactive, ref, h } from 'vue';
-import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue-taro';
-const state = reactive({
-  showIcon: false,
-  placement: false,
-  darkTheme: false,
-  lightTheme: false,
-  Customized: false,
-  disableAction: false,
-  topLocation: false, //向上弹出
-  rightLocation: false, //向右弹出
-  leftLocation: false, //向左弹出
-  customPositon: false,
-
-  showPicker: false,
-  customTarget: false,
-  customColor: false
-});
-const curPostion = ref('top');
-
-const columns = ref([
-  { text: 'top', value: 'top' },
-  { text: 'top-start', value: 'top-start' },
-  { text: 'top-end', value: 'top-end' },
-  { text: 'right', value: 'right' },
-  { text: 'right-start', value: 'right-start' },
-  { text: 'right-end', value: 'right-end' },
-  { text: 'bottom', value: 'bottom' },
-  { text: 'bottom-start', value: 'bottom-start' },
-  { text: 'bottom-end', value: 'bottom-end' },
-  { text: 'left', value: 'left' },
-  { text: 'left-start', value: 'left-start' },
-  { text: 'left-end', value: 'left-end' }
-]);
-
-const iconItemList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  },
-  {
-    name: 'option3'
-  }
-]);
-
-const positionList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  }
-]);
-
-const itemList = reactive([
-  {
-    name: 'option1',
-    icon: () => {
-      return h(My2, {
-        width: '14px',
-        color: 'rgba(250, 44, 25, 1)'
-      });
-    }
-  },
-  {
-    name: 'option2',
-    icon: () => {
-      return h(Cart2, {
-        width: '14px'
-      });
-    }
-  },
-  {
-    name: 'option3',
-    icon: () => {
-      return h(Location, {
-        width: '14px'
-      });
-    }
-  }
-]);
-
-const itemListDisabled = reactive([
-  {
-    name: 'option1',
-    disabled: true
-  },
-  {
-    name: 'option2',
-    disabled: true
-  },
-  {
-    name: 'option3'
-  }
-]);
-
-const selfContent = reactive([
-  {
-    name: Service,
-    desc: 'option1'
-  },
-  {
-    name: Notice,
-    desc: 'option2'
-  },
-  {
-    name: Location,
-    desc: 'option3'
-  },
-  {
-    name: Category,
-    desc: 'option4'
-  },
-  {
-    name: Scan2,
-    desc: 'option5'
-  },
-  {
-    name: Message,
-    desc: 'option6'
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Option from './option.vue';
+import Content from './content.vue';
+import Position from './position.vue';
+import Target from './target.vue';
+import Color from './color.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    option: '选项配置',
+    content: '自定义内容',
+    position: '位置自定义',
+    target: '自定义目标元素',
+    color: '自定义颜色'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    option: 'Option Configuration',
+    content: 'Custom Content',
+    position: 'Custom Location',
+    target: 'custom target',
+    color: 'custom color'
   }
-]);
-
-const chooseItem = (item: unknown, index: number) => {
-  console.log(item, index);
-};
-
-const handlePicker = () => {
-  state.showPicker = true;
-  setTimeout(() => {
-    state.customPositon = true;
-  }, 1000);
-};
-
-const change = ({ selectedValue }) => {
-  curPostion.value = selectedValue[0];
-  if (state.showPicker) state.customPositon = true;
-};
-
-const clickCustomHandle = () => {
-  state.customTarget = !state.customTarget;
-};
-
-const closePicker = () => {
-  state.customPositon = false;
-  state.showPicker = false;
-};
+});
 </script>
-<style lang="scss">
-.demo > h2 {
-  padding: 0;
-}
-.brickBox {
-  margin: 80px 0;
-  display: flex;
-  justify-content: center;
-  .brick {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 10px;
-  }
-}
-
-.popover-demo-custom {
-  .nut-popover-content {
-    width: 120px;
-  }
-}
-
-.customClass {
-  .nut-popover-content {
-    width: auto;
-  }
-  .self-content {
-    width: 195px;
-    display: flex;
-    flex-wrap: wrap;
-    &-item {
-      margin-top: 10px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-    &-desc {
-      margin-top: 5px;
-      width: 60px;
-      font-size: 10px;
-      text-align: center;
-    }
-  }
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue
new file mode 100644
index 0000000000..bac730ee87
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue
@@ -0,0 +1,59 @@
+<template>
+  <nut-space>
+    <nut-popover v-model:visible="show1" :list="list1" location="right">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Disabled </nut-button>
+      </template>
+    </nut-popover>
+    <nut-popover v-model:visible="show2" theme="dark" :list="list2">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Icon </nut-button>
+      </template>
+    </nut-popover>
+  </nut-space>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowRef, h } from 'vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const list1 = ref([
+  {
+    name: 'option1',
+    disabled: true
+  },
+  {
+    name: 'option2',
+    disabled: true
+  },
+  {
+    name: 'option3'
+  }
+]);
+const list2 = shallowRef([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
+      });
+    }
+  },
+  {
+    name: 'option2',
+    icon: Cart2
+  },
+  {
+    name: 'option3',
+    icon: Location
+  }
+]);
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue
new file mode 100644
index 0000000000..636504c4bb
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue
@@ -0,0 +1,87 @@
+<template>
+  <nut-cell title="Position" @click="handlePicker"></nut-cell>
+  <nut-popup v-model:visible="showPopup" position="bottom">
+    <nut-picker :columns="columns" @change="change" @confirm="close" @close="close">
+      <template #top>
+        <div class="brickBox">
+          <div id="popover-target" class="brick"></div>
+        </div>
+      </template>
+    </nut-picker>
+  </nut-popup>
+
+  <nut-popover
+    v-model:visible="customPositon"
+    target-id="popover-target"
+    :location="curPostion"
+    theme="dark"
+    :list="positionList"
+  >
+  </nut-popover>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+const showPopup = ref(false);
+const customPositon = ref(false);
+const curPostion = ref('top');
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
+const close = () => {
+  customPositon.value = false;
+  showPopup.value = false;
+};
+
+const change = ({ selectedValue }) => {
+  curPostion.value = selectedValue[0];
+  if (showPopup.value) customPositon.value = true;
+};
+
+const handlePicker = () => {
+  showPopup.value = true;
+  setTimeout(() => {
+    customPositon.value = true;
+  }, 0);
+};
+
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
+</script>
+
+<style>
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+}
+.brick {
+  width: 60px;
+  height: 60px;
+  background: #fa2c19;
+  border-radius: 10px;
+}
+</style>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/target.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/target.vue
new file mode 100644
index 0000000000..8f1e36d395
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/target.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-button id="pop-target" type="primary" shape="square" @click="show = true"> Target </nut-button>
+  <nut-popover v-model:visible="show" target-id="pop-target" :list="list" location="top-start"></nut-popover>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+
+const list = ref([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/demo.vue b/src/packages/__VUE/popover/demo.vue
deleted file mode 100644
index bf3ea74979..0000000000
--- a/src/packages/__VUE/popover/demo.vue
+++ /dev/null
@@ -1,352 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('title') }}</h2>
-
-    <nut-row type="flex">
-      <nut-col :span="8">
-        <nut-popover
-          v-model:visible="state.lightTheme"
-          :list="iconItemList"
-          location="bottom-start"
-          @choose="chooseItem"
-        >
-          <template #reference>
-            <nut-button type="primary" shape="square">{{ translate('light') }}</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-      <nut-col :span="8">
-        <nut-popover v-model:visible="state.darkTheme" theme="dark" location="bottom-start" :list="iconItemList">
-          <template #reference>
-            <nut-button type="primary" shape="square">{{ translate('dark') }}</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-    </nut-row>
-
-    <h2>{{ translate('title1') }}</h2>
-
-    <nut-row type="flex">
-      <nut-col :span="8">
-        <nut-popover v-model:visible="state.showIcon" theme="dark" :list="itemList">
-          <template #reference>
-            <nut-button type="primary" shape="square">{{ translate('showIcon') }}</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-      <nut-col :span="8">
-        <nut-popover v-model:visible="state.disableAction" :list="itemListDisabled" location="right">
-          <template #reference>
-            <nut-button type="primary" shape="square">{{ translate('disableAction') }}</nut-button>
-          </template>
-        </nut-popover>
-      </nut-col>
-    </nut-row>
-
-    <h2>{{ translate('title2') }}</h2>
-    <nut-popover v-model:visible="state.Customized" location="top-start" custom-class="customClass">
-      <template #reference>
-        <nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
-      </template>
-
-      <template #content>
-        <div class="self-content">
-          <div v-for="(item, index) in selfContent" :key="index" class="self-content-item">
-            <Service></Service>
-            <div class="self-content-desc">{{ item.desc }}</div>
-          </div>
-        </div>
-      </template>
-    </nut-popover>
-
-    <h2>{{ translate('title3') }}</h2>
-
-    <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-    <nut-popup v-model:visible="state.showPicker" position="bottom">
-      <nut-picker
-        :columns="columns"
-        title=""
-        :swipe-duration="500"
-        @change="change"
-        @confirm="closePicker"
-        @close="closePicker"
-      >
-        <template #top>
-          <div class="brickBox">
-            <div id="pickerTarget" class="brick"></div>
-          </div>
-        </template>
-      </nut-picker>
-    </nut-popup>
-
-    <nut-popover
-      v-model:visible="state.customPositon"
-      target-id="pickerTarget"
-      :location="curPostion"
-      theme="dark"
-      :list="positionList"
-    >
-    </nut-popover>
-
-    <h2>{{ translate('contentTarget') }}</h2>
-    <nut-button id="popid" type="primary" shape="square" @click="clickCustomHandle">
-      {{ translate('contentTarget') }}
-    </nut-button>
-    <nut-popover
-      v-model:visible="state.customTarget"
-      target-id="popid"
-      :list="iconItemList"
-      location="top-start"
-    ></nut-popover>
-
-    <h2>{{ translate('contentColor') }}</h2>
-
-    <nut-popover
-      v-model:visible="state.customColor"
-      :list="iconItemList"
-      location="right-start"
-      bg-color="#f00"
-      theme="dark"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">{{ translate('contentColor') }}</nut-button>
-      </template>
-    </nut-popover>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive, ref, h } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue';
-import { PopoverLocation } from './type';
-
-const translate = useTranslate({
-  'zh-CN': {
-    title: '基础用法',
-    title1: '选项配置',
-    title2: '自定义内容',
-    title3: '位置自定义',
-    light: '明朗风格',
-    dark: '暗黑风格',
-    showIcon: '展示图标',
-    disableAction: '禁用选项',
-    content: '自定义内容',
-    contentColor: '自定义颜色',
-    contentTarget: '自定义目标元素'
-  },
-  'en-US': {
-    title: 'Basic Usage',
-    title1: 'Option Configuration',
-    title2: 'Custom Content',
-    title3: 'Custom Location',
-    light: 'light',
-    dark: 'dark',
-    showIcon: 'show icon',
-    disableAction: 'disabled',
-    content: 'custom content',
-    contentColor: 'custom color',
-    contentTarget: 'custom target'
-  }
-});
-
-const state = reactive({
-  showIcon: false,
-  placement: false,
-  darkTheme: false,
-  lightTheme: false,
-  Customized: false,
-  disableAction: false,
-  topLocation: false, //向上弹出
-  rightLocation: false, //向右弹出
-  leftLocation: false, //向左弹出
-  customPositon: false,
-
-  showPicker: false,
-
-  customTarget: false,
-  customColor: false
-});
-const curPostion = ref<PopoverLocation>('top');
-
-const columns = ref([
-  { text: 'top', value: 'top' },
-  { text: 'top-start', value: 'top-start' },
-  { text: 'top-end', value: 'top-end' },
-  { text: 'right', value: 'right' },
-  { text: 'right-start', value: 'right-start' },
-  { text: 'right-end', value: 'right-end' },
-  { text: 'bottom', value: 'bottom' },
-  { text: 'bottom-start', value: 'bottom-start' },
-  { text: 'bottom-end', value: 'bottom-end' },
-  { text: 'left', value: 'left' },
-  { text: 'left-start', value: 'left-start' },
-  { text: 'left-end', value: 'left-end' }
-]);
-
-const iconItemList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  },
-  {
-    name: 'option3'
-  }
-]);
-
-const positionList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  }
-]);
-
-const itemList = reactive([
-  {
-    name: 'option1',
-    icon: () => {
-      return h(My2, {
-        width: '14px',
-        color: 'rgba(250, 44, 25, 1)'
-      });
-    }
-  },
-  {
-    name: 'option2',
-    icon: () => {
-      return h(Cart2, {
-        width: '14px'
-      });
-    }
-  },
-  {
-    name: 'option3',
-    icon: () => {
-      return h(Location, {
-        width: '14px'
-      });
-    }
-  }
-]);
-
-const itemListDisabled = reactive([
-  {
-    name: 'option1',
-    disabled: true
-  },
-  {
-    name: 'option2',
-    disabled: true
-  },
-  {
-    name: 'option3'
-  }
-]);
-
-const selfContent = reactive([
-  {
-    name: Service,
-    desc: 'option1'
-  },
-  {
-    name: Notice,
-    desc: 'option2'
-  },
-  {
-    name: Location,
-    desc: 'option3'
-  },
-  {
-    name: Category,
-    desc: 'option4'
-  },
-  {
-    name: Scan2,
-    desc: 'option5'
-  },
-  {
-    name: Message,
-    desc: 'option6'
-  }
-]);
-
-const chooseItem = (item: unknown, index: number) => {
-  console.log(item, index);
-};
-
-const handlePicker = () => {
-  state.showPicker = true;
-  setTimeout(() => {
-    state.customPositon = true;
-  }, 0);
-};
-
-const change = ({ selectedValue }: any) => {
-  curPostion.value = selectedValue[0];
-  if (state.showPicker) state.customPositon = true;
-};
-
-const clickCustomHandle = () => {
-  state.customTarget = !state.customTarget;
-};
-
-const closePicker = () => {
-  state.customPositon = false;
-  state.showPicker = false;
-};
-</script>
-<style lang="scss">
-.demo > h2 {
-  padding: 0;
-}
-
-.brickBox {
-  margin: 80px 0;
-  display: flex;
-  justify-content: center;
-
-  .brick {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 10px;
-  }
-}
-
-.demo {
-  .nut-popover-content {
-    width: 120px;
-  }
-}
-
-.customClass {
-  .nut-popover-content {
-    width: auto;
-  }
-
-  .self-content {
-    width: 195px;
-    display: flex;
-    flex-wrap: wrap;
-
-    &-item {
-      margin-top: 10px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-
-    &-desc {
-      margin-top: 5px;
-      width: 60px;
-      font-size: 10px;
-      text-align: center;
-    }
-  }
-}
-</style>
diff --git a/src/packages/__VUE/popover/demo/basic.vue b/src/packages/__VUE/popover/demo/basic.vue
new file mode 100644
index 0000000000..8f89dd3063
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/basic.vue
@@ -0,0 +1,39 @@
+<template>
+  <nut-space>
+    <nut-popover v-model:visible="show1" :list="list" location="bottom-start" @choose="choose">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Light </nut-button>
+      </template>
+    </nut-popover>
+    <nut-popover v-model:visible="show2" :list="list" theme="dark" location="bottom-start">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Dark </nut-button>
+      </template>
+    </nut-popover>
+  </nut-space>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const list = ref([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  },
+  {
+    name: 'option3'
+  }
+]);
+const choose = (item: unknown, index: number) => {
+  console.log(item, index);
+};
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/demo/color.vue b/src/packages/__VUE/popover/demo/color.vue
new file mode 100644
index 0000000000..1590a3b293
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/color.vue
@@ -0,0 +1,31 @@
+<template>
+  <nut-popover v-model:visible="show" :list="list" theme="dark" bg-color="#f00" @choose="choose">
+    <template #reference>
+      <nut-button type="primary" shape="square"> Light </nut-button>
+    </template>
+  </nut-popover>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const list = ref([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  },
+  {
+    name: 'option3'
+  }
+]);
+const choose = (item: unknown, index: number) => {
+  console.log(item, index);
+};
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/demo/content.vue b/src/packages/__VUE/popover/demo/content.vue
new file mode 100644
index 0000000000..eba44dfc3d
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/content.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-popover v-model:visible="show" location="right">
+    <template #reference>
+      <nut-button type="primary" shape="square"> Content </nut-button>
+    </template>
+
+    <template #content>
+      <div> Custom Content Custom Content </div>
+      <div> Custom Content Custom Content </div>
+    </template>
+  </nut-popover>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/demo/index.vue b/src/packages/__VUE/popover/demo/index.vue
new file mode 100644
index 0000000000..0e26e69b5f
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('option') }}</h2>
+    <Option />
+
+    <h2>{{ t('content') }}</h2>
+    <Content />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('target') }}</h2>
+    <Target />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Option from './option.vue';
+import Content from './content.vue';
+import Position from './position.vue';
+import Target from './target.vue';
+import Color from './color.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    option: '选项配置',
+    content: '自定义内容',
+    position: '位置自定义',
+    target: '自定义目标元素',
+    color: '自定义颜色'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    option: 'Option Configuration',
+    content: 'Custom Content',
+    position: 'Custom Location',
+    target: 'custom target',
+    color: 'custom color'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/popover/demo/option.vue b/src/packages/__VUE/popover/demo/option.vue
new file mode 100644
index 0000000000..bac730ee87
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/option.vue
@@ -0,0 +1,59 @@
+<template>
+  <nut-space>
+    <nut-popover v-model:visible="show1" :list="list1" location="right">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Disabled </nut-button>
+      </template>
+    </nut-popover>
+    <nut-popover v-model:visible="show2" theme="dark" :list="list2">
+      <template #reference>
+        <nut-button type="primary" shape="square"> Icon </nut-button>
+      </template>
+    </nut-popover>
+  </nut-space>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowRef, h } from 'vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const list1 = ref([
+  {
+    name: 'option1',
+    disabled: true
+  },
+  {
+    name: 'option2',
+    disabled: true
+  },
+  {
+    name: 'option3'
+  }
+]);
+const list2 = shallowRef([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
+      });
+    }
+  },
+  {
+    name: 'option2',
+    icon: Cart2
+  },
+  {
+    name: 'option3',
+    icon: Location
+  }
+]);
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/demo/position.vue b/src/packages/__VUE/popover/demo/position.vue
new file mode 100644
index 0000000000..636504c4bb
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/position.vue
@@ -0,0 +1,87 @@
+<template>
+  <nut-cell title="Position" @click="handlePicker"></nut-cell>
+  <nut-popup v-model:visible="showPopup" position="bottom">
+    <nut-picker :columns="columns" @change="change" @confirm="close" @close="close">
+      <template #top>
+        <div class="brickBox">
+          <div id="popover-target" class="brick"></div>
+        </div>
+      </template>
+    </nut-picker>
+  </nut-popup>
+
+  <nut-popover
+    v-model:visible="customPositon"
+    target-id="popover-target"
+    :location="curPostion"
+    theme="dark"
+    :list="positionList"
+  >
+  </nut-popover>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+const showPopup = ref(false);
+const customPositon = ref(false);
+const curPostion = ref('top');
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
+const close = () => {
+  customPositon.value = false;
+  showPopup.value = false;
+};
+
+const change = ({ selectedValue }) => {
+  curPostion.value = selectedValue[0];
+  if (showPopup.value) customPositon.value = true;
+};
+
+const handlePicker = () => {
+  showPopup.value = true;
+  setTimeout(() => {
+    customPositon.value = true;
+  }, 0);
+};
+
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
+</script>
+
+<style>
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+}
+.brick {
+  width: 60px;
+  height: 60px;
+  background: #fa2c19;
+  border-radius: 10px;
+}
+</style>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/demo/target.vue b/src/packages/__VUE/popover/demo/target.vue
new file mode 100644
index 0000000000..8f1e36d395
--- /dev/null
+++ b/src/packages/__VUE/popover/demo/target.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-button id="pop-target" type="primary" shape="square" @click="show = true"> Target </nut-button>
+  <nut-popover v-model:visible="show" target-id="pop-target" :list="list" location="top-start"></nut-popover>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+
+const list = ref([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+</script>
+
+<style>
+.nut-popover-content {
+  width: 100px;
+}
+</style>
diff --git a/src/packages/__VUE/popover/doc.en-US.md b/src/packages/__VUE/popover/doc.en-US.md
index 007982f18f..9d74324549 100644
--- a/src/packages/__VUE/popover/doc.en-US.md
+++ b/src/packages/__VUE/popover/doc.en-US.md
@@ -18,212 +18,21 @@ app.use(Popover);
 
 Popover supports both light and dark styles. The default is light style. Set the `theme` property to `dark` to switch to dark style.
 
-:::demo
-
-```vue
-<template>
-  <nut-row type="flex">
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover
-        v-model:visible="visible.lightTheme"
-        :list="iconItemList"
-        location="bottom-start"
-        @choose="chooseItem"
-      >
-        <template #reference>
-          <nut-button type="primary" shape="square">Light</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.darkTheme" theme="dark" location="bottom-start" :list="iconItemList">
-        <template #reference>
-          <nut-button type="primary" shape="square">Dark</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-  </nut-row>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const visible = reactive({
-  darkTheme: false,
-  lightTheme: false
-});
-const iconItemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover basic
 
 ### Option Configuration
 
 In the list array, an option can be disabled via the `disabled` field.
 
-:::demo
-
-```vue
-<template>
-  <nut-row type="flex">
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
-        <template #reference>
-          <nut-button type="primary" shape="square">Show Icon</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled" location="right">
-        <template #reference>
-          <nut-button type="primary" shape="square">Disabled</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-  </nut-row>
-</template>
-
-<script setup>
-import { reactive, h } from 'vue';
-import { Location, Cart2, My2 } from '@nutui/icons-vue';
-const visible = reactive({
-  showIcon: false,
-  disableAction: false
-});
-
-const itemList = reactive([
-  {
-    name: 'option1',
-    icon: () => {
-      return h(My2, {
-        width: '14px',
-        color: 'rgba(250, 44, 25, 1)'
-      });
-    }
-  },
-  {
-    name: 'option2',
-    icon: Cart2
-  },
-  {
-    name: 'option3',
-    icon: Location
-  }
-]);
-
-const itemListDisabled = reactive([
-  {
-    name: 'option1',
-    disabled: true
-  },
-  {
-    name: 'option2',
-    disabled: true
-  },
-  {
-    name: 'option3'
-  }
-]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-.nut-icon {
-  width: 14px;
-}
-</style>
-```
-
-:::
+> demo: popover option
 
 ### Custom Content
 
 Customize the content in the slot named content.
 
-:::demo
-
-```vue
-<template>
-  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
-    <template #reference>
-      <nut-button type="primary" shape="square">Custom Content</nut-button>
-    </template>
-
-    <template #content>
-      <div class="self-content">
-        <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-          <Service></Service>
-          <div class="self-content-desc">{{ item.desc }}</div>
-        </div>
-      </div>
-    </template>
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-import { Service } from '@nutui/icons-vue';
-const visible = ref({
-  customized: false
-});
-const selfContent = reactive([
-  {
-    desc: 'option1'
-  },
-  {
-    desc: 'option2'
-  },
-  {
-    desc: 'option3'
-  },
-  {
-    desc: 'option4'
-  },
-  {
-    desc: 'option5'
-  },
-  {
-    desc: 'option6'
-  }
-]);
-</script>
-
-<style>
-#app {
-  padding-top: 200px;
-}
-.self-content {
-  width: 195px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.self-content-item {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.self-content-desc {
-  margin-top: 5px;
-  width: 60px;
-  font-size: 10px;
-  text-align: center;
-}
-</style>
-```
-
-:::
+> demo: popover content
 
-### Placement
+### Position
 
 Use the location property to control where the bubble pops up. optional value
 
@@ -242,185 +51,17 @@ bottom-start  # Bottom left
 bottom-end    # Bottom right
 ```
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-  <nut-popup position="bottom" v-model:visible="showPicker">
-    <nut-picker
-      :columns="columns"
-      title=""
-      @change="change"
-      :swipe-duration="500"
-      @confirm="closePicker"
-      @close="closePicker"
-    >
-      <template #top>
-        <div class="brickBox">
-          <div class="brick" id="pickerTarget"></div>
-        </div>
-      </template>
-    </nut-picker>
-  </nut-popup>
-
-  <nut-popover
-    v-model:visible="customPositon"
-    targetId="pickerTarget"
-    :location="curPostion"
-    theme="dark"
-    :list="positionList"
-  >
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const showPicker = ref(false);
-const customPositon = ref(false);
-const curPostion = ref('top');
-const positionList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  }
-]);
-const closePicker = () => {
-  customPositon.value = false;
-  showPicker.value = false;
-};
-
-const change = ({ selectedValue }) => {
-  curPostion.value = selectedValue[0];
-  if (showPicker.value) customPositon.value = true;
-};
-
-const handlePicker = () => {
-  showPicker.value = true;
-  setTimeout(() => {
-    customPositon.value = true;
-  }, 0);
-};
-
-const columns = ref([
-  { text: 'top', value: 'top' },
-  { text: 'top-start', value: 'top-start' },
-  { text: 'top-end', value: 'top-end' },
-  { text: 'right', value: 'right' },
-  { text: 'right-start', value: 'right-start' },
-  { text: 'right-end', value: 'right-end' },
-  { text: 'bottom', value: 'bottom' },
-  { text: 'bottom-start', value: 'bottom-start' },
-  { text: 'bottom-end', value: 'bottom-end' },
-  { text: 'left', value: 'left' },
-  { text: 'left-start', value: 'left-start' },
-  { text: 'left-end', value: 'left-end' }
-]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-
-.brickBox {
-  margin: 80px 0;
-  display: flex;
-  justify-content: center;
-}
-
-.brick {
-  width: 60px;
-  height: 60px;
-  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-  border-radius: 10px;
-}
-</style>
-```
-
-:::
+> demo: popover position
 
-### custom target
+### Custom Target
 
 Popover provides the 'targetId' attribute to match the target element by adding the corresponding id value to the target element
 
-:::demo
-
-```vue
-<template>
-  <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">custom target</nut-button>
-  <nut-popover
-    v-model:visible="visible.customTarget"
-    targetId="popid"
-    :list="itemList"
-    location="top-start"
-  ></nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const visible = reactive({
-  customTarget: false
-});
-
-const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-
-const clickCustomHandle = () => {
-  visible.customTarget = !visible.customTarget;
-};
-</script>
-<style>
-#app {
-  margin-top: 300px;
-}
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover target
 
 ### Custom Color
 
-:::demo
-
-```vue
-<template>
-  <nut-popover
-    v-model:visible="visible.customColor"
-    :list="itemList"
-    location="right-start"
-    bgColor="#f00"
-    theme="dark"
-  >
-    <template #reference>
-      <nut-button type="primary" shape="square">Custom Color</nut-button>
-    </template>
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const visible = reactive({
-  customColor: false
-});
-
-const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-</script>
-<style>
-#app {
-  margin-top: 300px;
-}
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover color
 
 ## API
 
diff --git a/src/packages/__VUE/popover/doc.md b/src/packages/__VUE/popover/doc.md
index 8a8793942c..bb6df8d7d9 100644
--- a/src/packages/__VUE/popover/doc.md
+++ b/src/packages/__VUE/popover/doc.md
@@ -18,209 +18,19 @@ app.use(Popover);
 
 Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme` 属性设置为 `dark` 可切换为暗黑风格。
 
-:::demo
-
-```vue
-<template>
-  <nut-row type="flex">
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover
-        v-model:visible="visible.lightTheme"
-        :list="iconItemList"
-        location="bottom-start"
-        @choose="chooseItem"
-      >
-        <template #reference>
-          <nut-button type="primary" shape="square">明朗风格</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.darkTheme" theme="dark" location="bottom-start" :list="iconItemList">
-        <template #reference>
-          <nut-button type="primary" shape="square">暗黑风格</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-  </nut-row>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const visible = reactive({
-  darkTheme: false,
-  lightTheme: false
-});
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover basic
 
 ### 选项配置
 
 在 list 数组中，可以通过 disabled 字段来禁用某个选项。
 
-:::demo
-
-```vue
-<template>
-  <nut-row type="flex">
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
-        <template #reference>
-          <nut-button type="primary" shape="square">展示图标</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled" location="right">
-        <template #reference>
-          <nut-button type="primary" shape="square">禁用选项</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-  </nut-row>
-</template>
-
-<script setup>
-import { reactive, ref, h } from 'vue';
-import { Location, Cart2, My2 } from '@nutui/icons-vue';
-const visible = reactive({
-  showIcon: false,
-  disableAction: false
-});
-
-const itemList = reactive([
-  {
-    name: 'option1',
-    icon: () => {
-      return h(My2, {
-        width: '14px',
-        color: 'rgba(250, 44, 25, 1)'
-      });
-    }
-  },
-  {
-    name: 'option2',
-    icon: Cart2
-  },
-  {
-    name: 'option3',
-    icon: Location
-  }
-]);
-
-const itemListDisabled = reactive([
-  {
-    name: '选项一',
-    disabled: true
-  },
-  {
-    name: '选项二',
-    disabled: true
-  },
-  {
-    name: '选项三'
-  }
-]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-.nut-icon {
-  width: 14px;
-}
-</style>
-```
-
-:::
+> demo: popover option
 
 ### 自定义内容
 
 在名为 content 插槽中自定义内容。
 
-:::demo
-
-```vue
-<template>
-  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
-    <template #reference>
-      <nut-button type="primary" shape="square">自定义内容</nut-button>
-    </template>
-
-    <template #content>
-      <div class="self-content">
-        <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-          <Service></Service>
-          <div class="self-content-desc">{{ item.desc }}</div>
-        </div>
-      </div>
-    </template>
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-import { Service } from '@nutui/icons-vue';
-const visible = reactive({
-  customized: false
-});
-const selfContent = reactive([
-  {
-    desc: 'option1'
-  },
-  {
-    desc: 'option2'
-  },
-  {
-    desc: 'option3'
-  },
-  {
-    desc: 'option4'
-  },
-  {
-    desc: 'option5'
-  },
-  {
-    desc: 'option6'
-  }
-]);
-</script>
-
-<style>
-#app {
-  padding-top: 200px;
-}
-.self-content {
-  width: 195px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.self-content-item {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.self-content-desc {
-  margin-top: 5px;
-  width: 60px;
-  font-size: 10px;
-  text-align: center;
-}
-</style>
-```
-
-:::
+> demo: popover content
 
 ### 位置自定义
 
@@ -241,185 +51,19 @@ bottom-start  # 底部左侧位置
 bottom-end    # 底部右侧位置
 ```
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-  <nut-popup position="bottom" v-model:visible="showPicker">
-    <nut-picker
-      :columns="columns"
-      title=""
-      @change="change"
-      :swipe-duration="500"
-      @confirm="closePicker"
-      @close="closePicker"
-    >
-      <template #top>
-        <div class="brickBox">
-          <div class="brick" id="pickerTarget"></div>
-        </div>
-      </template>
-    </nut-picker>
-  </nut-popup>
-
-  <nut-popover
-    v-model:visible="customPositon"
-    targetId="pickerTarget"
-    :location="curPostion"
-    theme="dark"
-    :list="positionList"
-  >
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const showPicker = ref(false);
-const customPositon = ref(false);
-const curPostion = ref('top');
-const positionList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  }
-]);
-const closePicker = () => {
-  customPositon.value = false;
-  showPicker.value = false;
-};
-
-const change = ({ selectedValue }) => {
-  curPostion.value = selectedValue[0];
-  if (showPicker.value) customPositon.value = true;
-};
-
-const handlePicker = () => {
-  showPicker.value = true;
-  setTimeout(() => {
-    customPositon.value = true;
-  }, 0);
-};
-
-const columns = ref([
-  { text: 'top', value: 'top' },
-  { text: 'top-start', value: 'top-start' },
-  { text: 'top-end', value: 'top-end' },
-  { text: 'right', value: 'right' },
-  { text: 'right-start', value: 'right-start' },
-  { text: 'right-end', value: 'right-end' },
-  { text: 'bottom', value: 'bottom' },
-  { text: 'bottom-start', value: 'bottom-start' },
-  { text: 'bottom-end', value: 'bottom-end' },
-  { text: 'left', value: 'left' },
-  { text: 'left-start', value: 'left-start' },
-  { text: 'left-end', value: 'left-end' }
-]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-.brickBox {
-  margin: 80px 0;
-  display: flex;
-  justify-content: center;
-}
-.brick {
-  width: 60px;
-  height: 60px;
-  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-  border-radius: 10px;
-}
-</style>
-```
-
-:::
+> demo: popover position
 
 ### 自定义目标元素
 
 Popover 提供了 `targetId` 属性，用于匹配目标元素，在目标元素上添加对应的 id 值即可
 
-:::demo
-
-```vue
-<template>
-  <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">自定义目标元素</nut-button>
-  <nut-popover
-    v-model:visible="visible.customTarget"
-    targetId="popid"
-    :list="itemList"
-    location="top-start"
-  ></nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const visible = reactive({
-  customTarget: false
-});
-
-const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-
-const clickCustomHandle = () => {
-  visible.customTarget = !visible.customTarget;
-};
-</script>
-<style>
-#app {
-  margin-top: 300px;
-}
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover target
 
 ### 自定义颜色
 
-Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背景色
-
-:::demo
-
-```vue
-<template>
-  <nut-popover
-    v-model:visible="visible.customColor"
-    :list="itemList"
-    location="right-start"
-    bgColor="#f00"
-    theme="dark"
-  >
-    <template #reference>
-      <nut-button type="primary" shape="square">自定义颜色</nut-button>
-    </template>
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const visible = reactive({
-  customColor: false
-});
-
-const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-</script>
-<style>
-#app {
-  margin-top: 300px;
-}
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
+Popopver 提供了 2 种主题色，同样可以通过 `bg-color` 属性改变背景色
 
-:::
+> demo: popover color
 
 ## API
 
diff --git a/src/packages/__VUE/popover/doc.taro.md b/src/packages/__VUE/popover/doc.taro.md
index a473572119..9e23f2b07f 100644
--- a/src/packages/__VUE/popover/doc.taro.md
+++ b/src/packages/__VUE/popover/doc.taro.md
@@ -18,209 +18,19 @@ app.use(Popover);
 
 Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme` 属性设置为 `dark` 可切换为暗黑风格。
 
-:::demo
-
-```vue
-<template>
-  <nut-row type="flex">
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover
-        v-model:visible="visible.lightTheme"
-        :list="iconItemList"
-        location="bottom-start"
-        @choose="chooseItem"
-      >
-        <template #reference>
-          <nut-button type="primary" shape="square">明朗风格</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.darkTheme" theme="dark" location="bottom-start" :list="iconItemList">
-        <template #reference>
-          <nut-button type="primary" shape="square">暗黑风格</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-  </nut-row>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const visible = reactive({
-  darkTheme: false,
-  lightTheme: false
-});
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover basic exhibition
 
 ### 选项配置
 
 在 list 数组中，可以通过 disabled 字段来禁用某个选项。
 
-:::demo
-
-```vue
-<template>
-  <nut-row type="flex">
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
-        <template #reference>
-          <nut-button type="primary" shape="square">展示图标</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-    <nut-col :span="8" style="margin-left:20px">
-      <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled" location="right">
-        <template #reference>
-          <nut-button type="primary" shape="square">禁用选项</nut-button>
-        </template>
-      </nut-popover>
-    </nut-col>
-  </nut-row>
-</template>
-
-<script setup>
-import { reactive, ref, h } from 'vue';
-import { Location, Cart2, My2 } from '@nutui/icons-vue-taro';
-const visible = reactive({
-  showIcon: false,
-  disableAction: false
-});
-
-const itemList = reactive([
-  {
-    name: 'option1',
-    icon: () => {
-      return h(My2, {
-        width: '14px',
-        color: 'rgba(250, 44, 25, 1)'
-      });
-    }
-  },
-  {
-    name: 'option2',
-    icon: Cart2
-  },
-  {
-    name: 'option3',
-    icon: Location
-  }
-]);
-
-const itemListDisabled = reactive([
-  {
-    name: '选项一',
-    disabled: true
-  },
-  {
-    name: '选项二',
-    disabled: true
-  },
-  {
-    name: '选项三'
-  }
-]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-.nut-icon {
-  width: 14px;
-}
-</style>
-```
-
-:::
+> demo: popover option exhibition
 
 ### 自定义内容
 
 在名为 content 插槽中自定义内容。
 
-:::demo
-
-```vue
-<template>
-  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
-    <template #reference>
-      <nut-button type="primary" shape="square">自定义内容</nut-button>
-    </template>
-
-    <template #content>
-      <div class="self-content">
-        <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-          <Service></Service>
-          <div class="self-content-desc">{{ item.desc }}</div>
-        </div>
-      </div>
-    </template>
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-import { Service } from '@nutui/icons-vue-taro';
-const visible = reactive({
-  customized: false
-});
-const selfContent = reactive([
-  {
-    desc: 'option1'
-  },
-  {
-    desc: 'option2'
-  },
-  {
-    desc: 'option3'
-  },
-  {
-    desc: 'option4'
-  },
-  {
-    desc: 'option5'
-  },
-  {
-    desc: 'option6'
-  }
-]);
-</script>
-
-<style>
-page {
-  padding-top: 200px;
-}
-.self-content {
-  width: 195px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.self-content-item {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.self-content-desc {
-  margin-top: 5px;
-  width: 60px;
-  font-size: 10px;
-  text-align: center;
-}
-</style>
-```
-
-:::
+> demo: popover content exhibition
 
 ### 位置自定义
 
@@ -241,186 +51,19 @@ bottom-start  # 底部左侧位置
 bottom-end    # 底部右侧位置
 ```
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-  <nut-popup position="bottom" v-model:visible="showPicker">
-    <nut-picker
-      :columns="columns"
-      title=""
-      @change="change"
-      :swipe-duration="500"
-      @confirm="closePicker"
-      @close="closePicker"
-    >
-      <template #top>
-        <div class="brickBox">
-          <div class="brick" id="pickerTarget"></div>
-        </div>
-      </template>
-    </nut-picker>
-  </nut-popup>
-
-  <nut-popover
-    v-model:visible="customPositon"
-    targetId="pickerTarget"
-    :location="curPostion"
-    theme="dark"
-    :list="positionList"
-  >
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const showPicker = ref(false);
-const customPositon = ref(false);
-const curPostion = ref('top');
-const positionList = reactive([
-  {
-    name: 'option1'
-  },
-  {
-    name: 'option2'
-  }
-]);
-const closePicker = () => {
-  customPositon.value = false;
-  showPicker.value = false;
-};
-
-const change = ({ selectedValue }) => {
-  curPostion.value = selectedValue[0];
-  if (showPicker.value) customPositon.value = true;
-};
-
-const handlePicker = () => {
-  showPicker.value = true;
-  setTimeout(() => {
-    customPositon.value = true;
-  }, 1000);
-};
-
-const columns = ref([
-  { text: 'top', value: 'top' },
-  { text: 'top-start', value: 'top-start' },
-  { text: 'top-end', value: 'top-end' },
-  { text: 'right', value: 'right' },
-  { text: 'right-start', value: 'right-start' },
-  { text: 'right-end', value: 'right-end' },
-  { text: 'bottom', value: 'bottom' },
-  { text: 'bottom-start', value: 'bottom-start' },
-  { text: 'bottom-end', value: 'bottom-end' },
-  { text: 'left', value: 'left' },
-  { text: 'left-start', value: 'left-start' },
-  { text: 'left-end', value: 'left-end' }
-]);
-</script>
-
-<style>
-.nut-popover-content {
-  width: 120px;
-}
-.brickBox {
-  margin: 80px 0;
-  display: flex;
-  justify-content: center;
-}
-.brick {
-  width: 60px;
-  height: 60px;
-  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-  border-radius: 10px;
-}
-</style>
-```
-
-:::
+> demo: popover position exhibition
 
 ### 自定义目标元素
 
 Popover 提供了 `targetId` 属性，用于匹配目标元素，在目标元素上添加对应的 id 值即可
 
-:::demo
-
-```vue
-<template>
-  <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">自定义目标元素</nut-button>
-  <nut-popover
-    v-model:visible="visible.customTarget"
-    targetId="popid"
-    :list="itemList"
-    location="top-start"
-  ></nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const visible = reactive({
-  customTarget: false
-});
-
-const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-
-const clickCustomHandle = () => {
-  visible.customTarget = !visible.customTarget;
-};
-</script>
-<style>
-#popid {
-  margin-top: 300px;
-}
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
-
-:::
+> demo: popover target exhibition
 
 ### 自定义颜色
 
-Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背景色
-
-:::demo
-
-```vue
-<template>
-  <nut-popover
-    v-model:visible="visible.customColor"
-    :list="itemList"
-    location="right-start"
-    bgColor="#f00"
-    theme="dark"
-  >
-    <template #reference>
-      <nut-button type="primary" shape="square">自定义颜色</nut-button>
-    </template>
-  </nut-popover>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const visible = reactive({
-  customColor: false
-});
-
-const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-</script>
-<style>
-page,
-#app {
-  margin-top: 300px;
-}
-.nut-popover-content {
-  width: 120px;
-}
-</style>
-```
+Popopver 提供了 2 种主题色，同样可以通过 `bg-color` 属性改变背景色
 
-:::
+> demo: popover color exhibition
 
 ## API