Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/.vitepress/config.ts

@@ -45,6 +45,7 @@ export default defineConfig({
           { text: 'Icon 图标', link: '/components/icon' },
           { text: 'Button 按钮', link: '/components/button' },
           { text: 'Input 输入框', link: '/components/input' },
+          { text: 'Popover 弹出起泡', link: '/components/popover' },
           { text: 'Tooltip 文字提示', link: '/components/tooltip' },
           { text: 'Message 消息提示', link: '/components/message' },
           { text: 'Card 卡片', link: '/components/card' },

docs/.vitepress/theme/index.ts

@@ -26,6 +26,7 @@ import '../../../style/progress';
 import '../../../style/loading';
 import '../../../style/description-panel';
 import '../../../style/tabbar';
+import '../../../style/popover';
 import '../../../style/util/tabs.css';
 
 export default {

docs/components/popover.md

@@ -0,0 +1,41 @@
+# Popover 弹出起泡
+
+点击/鼠标移入元素，弹出气泡式的卡片浮层。在内容周围弹出一些隐藏的信息。和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
+
+## 演示
+
+<script setup>
+  import { Popover, Button } from '../../src'
+
+  function click1() {
+    console.log('click1')
+  }
+</script>
+
+### 基础用法
+
+基
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+  </script>
+  <template>
+  </template>
+  </textarea>
+  <template #preview>
+    <Popover>
+      <Button @click="click1">悬浮</Button>
+    </Popover>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Popover Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---- | ---- | ---- | ------ |
+| x    | x    | x    | x      |

src/components/Popover.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { defineComponent, h, VNode } from 'vue';
+import type { PropType } from 'vue';
+
+function getFirstSlotVNode(vnodes?: VNode[]) {
+  if (vnodes != null) {
+    return vnodes[0];
+  }
+  return null;
+}
+
+export default defineComponent({
+  props: {
+    trigger: {
+      type: String as PropType<'hover' | 'click'>,
+      default: 'hover',
+    },
+  },
+  setup(props, { slots }) {
+    function handleMouseEnter(e: Event) {
+      console.log('mouseenter');
+    }
+
+    function hanldeMouseLeave(e: Event) {
+      console.log('mouseleave');
+    }
+
+    function handleClick(e: Event) {
+      console.log('click');
+    }
+
+    return () => {
+      const firstVNode = getFirstSlotVNode(
+        slots.default != null ? slots.default() : undefined,
+      );
+      if (firstVNode == null) {
+        return null;
+      }
+      const prop: any = {};
+      if (props.trigger === 'hover') {
+        prop.onMouseenter = handleMouseEnter;
+        prop.onMouseleave = hanldeMouseLeave;
+      } else {
+        prop.onClick = handleClick;
+      }
+      return h('div', h(firstVNode, prop));
+    };
+  },
+});
+</script>

src/index.ts

@@ -45,3 +45,4 @@ export { default as Tabbar } from './components/tabbar/Tabbar.vue';
 export { default as TabbarItem } from './components/tabbar/TabbarItem.vue';
 
 export type { ColumnOption } from './components/Table.vue';
+export { default as Popover } from "./components/Popover.vue"

style/popover/index.css

@@ -0,0 +1 @@
+import "./index.css";