chore(popover): split demo (#2879)

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>

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>

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>