Yy Craft

主题

Popover 弹出层 ​

基本用法 ​

查看示例
vue
<template>
  <yy-popover trigger="hover">
    <template #trigger>
      <yy-button>悬浮</yy-button>
    </template>
    <div>这是弹出内容</div>
  </yy-popover>
</template>

触发方式 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <yy-flex>
    <yy-popover trigger="click">
      <template #trigger>
        <yy-button>点我</yy-button>
      </template>
      <div>点击触发</div>
    </yy-popover>

    <yy-popover trigger="hover">
      <template #trigger>
        <yy-button>悬浮</yy-button>
      </template>
      <div>悬浮触发</div>
    </yy-popover>

    <yy-popover trigger="focus">
      <template #trigger>
        <yy-button>聚焦</yy-button>
      </template>
      <div>聚焦触发</div>
    </yy-popover>

    <yy-popover trigger="manual" :show-popover="show">
      <template #trigger>
        <yy-checkbox v-model="show" label="选中我触发" />
      </template>
      <div>手动触发</div>
    </yy-popover>
  </yy-flex>
</template>
查看示例
vue
<template>
  <yy-popover trigger="hover" :keep-alive-on-hover="false">
    <template #trigger>
      <yy-button>悬浮</yy-button>
    </template>
    <div>移入我我还是会隐藏</div>
  </yy-popover>
</template>

弹出位置 ​

查看示例
vue
<script setup lang="ts">
import { flexCenter } from 'yy-craft'

const allPlacement = [
  'top-start',
  'top',
  'top-end',
  'left-start',
  '', // 不渲染
  'right-start',
  'left',
  '', // 不渲染
  'right',
  'left-end',
  '', // 不渲染
  'right-end',
  'bottom-start',
  'bottom',
  'bottom-end',
] as const
</script>

<template>
  <div :style="flexCenter()">
    <yy-grid cols="3" :gap="10" :style="{ width: '60%' }">
      <yy-gi
        v-for="item in allPlacement"
        :key="item"
        :style="{ display: 'flex', justifyContent: 'center' }"
      >
        <template v-if="item">
          <yy-popover :placement="item" trigger="hover">
            <template #trigger>
              <yy-button>{{ item }}</yy-button>
            </template>
            <div>{{ item }}</div>
          </yy-popover>
        </template>
      </yy-gi>
    </yy-grid>
  </div>
</template>

延迟触发与延时隐藏 ​

查看示例
vue
<template>
  <yy-popover trigger="hover" :delay="500" :duration="500">
    <template #trigger>
      <yy-button>延迟500ms触发, 延迟500ms隐藏</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

设置元素的挂载位置 ​

查看示例
vue
<template>
  <yy-popover :to="false">
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

设置包裹元素 ​

查看示例
vue
<template>
  <yy-popover
    :to="false"
    wrapper
    wrapper-class="wrapper"
    wrapper-style="border: 1px solid #ccc"
  >
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

<style scoped>
.wrapper {
  display: inline-flex;
  border-radius: 10px;
  padding: 10px;
}
</style>

内容宽度 ​

查看示例
vue
<template>
  <yy-popover width="trigger">
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

不要箭头 ​

查看示例
vue
<template>
  <yy-popover :show-arrow="false">
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

不要默认样式 ​

查看示例
vue
<template>
  <yy-popover raw>
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

内容类名和样式 ​

查看示例
vue
<template>
  <yy-popover
    content-class="custom-content"
    content-style="color: red; font-weight: bold;"
  >
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

<style scoped>
.custom-content {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
}
</style>

箭头类名和样式 ​

查看示例
vue
<template>
  <yy-popover arrow-class="custom-class" arrow-style="background-color: red;">
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我是内容</div>
  </yy-popover>
</template>

<style scoped>
.custom-class {
  width: 20px;
  height: 20px;
}
</style>

层级 ​

查看示例
vue
<template>
  <yy-popover :z-index="100">
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我的层级只有100</div>
  </yy-popover>
</template>

吸附元素距离触发器的距离 ​

查看示例
vue
<template>
  <yy-popover :distance-from-trigger="20">
    <template #trigger>
      <yy-button>点我</yy-button>
    </template>
    <div>我距离触发器比较远</div>
  </yy-popover>
</template>

手动控制位置 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const x = ref(0)
const y = ref(0)
const showPopover = ref(false)

function clickHandle(event: MouseEvent) {
  x.value = event.clientX
  y.value = event.clientY
  showPopover.value = true
}
</script>

<template>
  <yy-popover trigger="manual" :show-popover="showPopover" :x="x" :y="y">
    <template #trigger>
      <div
        v-click-outside="() => (showPopover = false)"
        :style="{
          width: '100px',
          height: '100px',
          background: 'gray',
          cursor: 'pointer',
        }"
        @click="clickHandle"
      />
    </template>
    <div>x: {{ x }}, y: {{ y }}</div>
  </yy-popover>
</template>

Props ​

参数说明类型默认值
trigger触发方式'click' | 'hover' | 'focus' | 'manual''click'
placement弹出位置string'bottom'
width内容宽度 width=trigger时内容宽度与触发器宽度一致number | string | 'trigger'-
showArrow是否显示箭头booleantrue
raw是否去除默认样式boolean-
contentClass内容类名any-
contentStyle内容样式StyleValue-
arrowClass箭头类名any-
arrowStyle箭头样式StyleValue-
zIndex层级number-
distanceFromTrigger吸附元素距离触发器的距离number10
showPopover手动控制显示boolean-
keepAliveOnHover鼠标悬停在内容时不隐藏 (仅在 trigger=hover 时生效)booleantrue
delay延迟触发时间 (仅在 trigger=hover 时生效)number100
duration延迟隐藏时间 (仅在 trigger=hover 时生效)number200
to弹出层挂载位置string | RendererElement | boolean'body'
wrapper是否使用包裹元素boolean-
wrapperClass包裹元素的类名string-
wrapperStyle包裹元素的样式StyleValue-
x手动控制位置x坐标 (仅在 trigger=manual 时生效)number-
y手动控制位置y坐标 (仅在 trigger=manual 时生效)number-

Events ​

事件名说明回调参数
show显示时触发-
showed显示动画结束时触发-
hide隐藏时触发-
hid隐藏动画结束时触发-
clickoutside点击内容区域外时触发-

Slots ​

插槽名说明
trigger触发元素内容
default弹出层内容