<template>
  <div>
    <!-- 使用 van-popover 组件 -->
    <van-popover
      v-model="showPopover"
      :position="position"
      :trigger="trigger"
      :offset="offset"
    >
      <!-- van-button 是弹出框的触发元素 -->
      <van-button type="primary">{{ triggerText }}</van-button>
      <!-- 弹出框的内容 -->
      <div style="padding: 16px;">这是一个气泡弹出框</div>
    </van-popover>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 是否显示弹出框
    const showPopover = ref(false);

    // 弹出框的触发方式，可选值为 'click' 或 'hover'
    const trigger = ref('click');

    // 弹出框的位置，可选值为 'top'、'bottom'、'left'、'right' 等
    const position = ref('bottom');

    // 触发元素的文本
    const triggerText = ref('点击触发');

    // 弹出框的偏移量
    const offset = ref([0, 10]);

    return {
      showPopover,
      trigger,
      position,
      triggerText,
      offset,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>