vue3+ts popover 组件怎么写

以下是一个简单的 Vue 3 + TypeScript 实现的 Popover 组件：

<template>
  <div class="popover-container" @click="togglePopover">
    <slot name="trigger"></slot>
    <div class="popover" v-if="visible">
      <div class="popover-arrow"></div>
      <div class="popover-content">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Popover',
  setup() {
    const visible = ref(false)

    const togglePopover = () => {
      visible.value = !visible.value
    }

    return {
      visible,
      togglePopover,
    }
  },
})
</script>

<style scoped>
.popover-container {
  position: relative;
}

.popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}

.popover-arrow {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid #fff;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  transform: translateX(-50%);
}

.popover-content {
  margin: 0;
}
</style>

使用示例：

<Popover>
  <template v-slot:trigger>
    <button>Toggle Popover</button>
  </template>
  <template v-slot:content>
    <p>This is the popover content.</p>
  </template>
</Popover>