feat: Popover 样式完成

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

Author: Tenny

docs/components/popover.md

@@ -25,8 +25,10 @@
   </template>
   </textarea>
   <template #preview>
-    <Popover>
-      <Button @click="click1">悬浮</Button>
+    <Popover content="Content">
+      <template #trigger>
+        <Button @click="click1">悬浮</Button>
+      </template>
     </Popover>
   </template>
   </CodePreview>

src/components/Popover.vue

@@ -1,38 +1,51 @@
 <script lang="ts">
-import { defineComponent, h, VNode } from 'vue';
+import { defineComponent, h, VNode, Teleport, ref, Transition } from 'vue';
 import type { PropType } from 'vue';
 
-function getFirstSlotVNode(vnodes?: VNode[]) {
-  if (vnodes != null) {
-    return vnodes[0];
+function getFirstTriggerVNode(slots: any): VNode | null {
+  if (slots.trigger != null) {
+    return slots.trigger()[0];
   }
   return null;
 }
 
 export default defineComponent({
   props: {
+    /** 触发方式: hover - 渲染, click - 点击 */
     trigger: {
       type: String as PropType<'hover' | 'click'>,
       default: 'hover',
     },
+    /** 显示的内容，也可以通过写入默认 slot 修改显示内容 */
+    content: String,
   },
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
+    const show = ref(false);
+    const posStyle = ref({});
+
     function handleMouseEnter(e: Event) {
-      console.log('mouseenter');
+      const $target = e.target as HTMLElement;
+      const rect = $target.getBoundingClientRect();
+      console.log(rect);
+      console.log($target.offsetParent.getBoundingClientRect());
+      posStyle.value = {
+        top: 500 + 'px',
+        left: `${rect.left}px`,
+      };
+      show.value = true;
     }
 
-    function hanldeMouseLeave(e: Event) {
-      console.log('mouseleave');
+    /** 鼠标离开事件 */
+    function hanldeMouseLeave() {
+      show.value = false;
     }
 
     function handleClick(e: Event) {
       console.log('click');
     }
 
     return () => {
-      const firstVNode = getFirstSlotVNode(
-        slots.default != null ? slots.default() : undefined,
-      );
+      const firstVNode = getFirstTriggerVNode(slots);
       if (firstVNode == null) {
         return null;
       }
@@ -43,7 +56,38 @@ export default defineComponent({
       } else {
         prop.onClick = handleClick;
       }
-      return h('div', h(firstVNode, prop));
+      return [
+        h(firstVNode, prop),
+        h(
+          Teleport,
+          { to: 'body' },
+          h(
+            Transition,
+            { name: 'nt-opacity' },
+            {
+              default: () =>
+                show.value
+                  ? h(
+                      'div',
+                      {
+                        ...attrs,
+                        class: ['nt-popover', attrs.class],
+                        style: [posStyle.value],
+                      },
+                      [
+                        slots.default != null
+                          ? slots.default()
+                          : props.content != null
+                            ? h('span', props.content)
+                            : null,
+                        h('span', { class: 'nt-popover-arrow' }),
+                      ],
+                    )
+                  : null,
+            },
+          ),
+        ),
+      ];
     };
   },
 });

style/popover/index.css

@@ -0,0 +1,24 @@
+.nt-popover {
+  --nt-popover-border-color: #e4e4e4;
+  position: absolute;
+  top: 264px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
+  background: #ffffff;
+  border: 1px solid var(--nt-popover-border-color);
+  border-radius: 4px;
+  padding: 10px;
+  z-index: 30;
+  color: #666666;
+  box-sizing: border-box;
+}
+
+.nt-popover-arrow {
+  position: absolute;
+  border-width: 6px;
+  border-style: solid;
+  left: 50%;
+  margin-left: -5px;
+  top: 100%;
+  border-color: var(--nt-popover-border-color) transparent transparent
+    transparent;
+}

style/popover/index.js

@@ -1 +1,2 @@
-import "./index.css";
+import '../util/transition.css';
+import './index.css';