Popper

弹出气泡
常用于展示鼠标 hover 、click 时的提示信息。

基础用法

文字弹出框的基础用法

template 用法

vue
<template>
  <ap-popper :content="content" trigger="hover" :show-arrow="false">
    <ap-button plain>Click</ap-button>
  </ap-popper>
</template>

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

const content = ref(
  'this is popper content, this is popper content, this is popper content',
)
</script>

functional 用法

TIP

使用 function 方式需要全局注册使用 usePopperTip 方法
更多使用方法参考 https://popper.js.org/docs/v2/constructors/

import { usePopperTip } from 'apathia-ui'
app.use(usePopperTip)

vue
<template>
  <ap-button @click="showPopper">函数式调用</ap-button>
  <ap-button ref="popperRef">Target</ap-button>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { usePopperTip } from 'apathia-ui'

const { popper } = usePopperTip()
const popperRef = ref<HTMLElement | null>(null)

const showPopper = () => {
  popper({
    target: popperRef.value,
    render: () =>
      h('div', [
        h('div', 'Functional Title'),
        h('div', 'Functional Content'),
        h('div', 'Functional Content'),
        h('div', 'Functional Content'),
      ]),
  })
}
</script>

自定义内容

可以通过插槽(content)的方式，自定义显示的内容

vue
<template>
  <ap-popper placement="right" trigger="hover" :show-arrow="false">
    <ap-button plain>Click</ap-button>
    <template #content>
      <div class="content">
        <div>是否确认删除？</div>
        <div>
          <ap-button primary small>确认</ap-button>
          <ap-button small>取消</ap-button>
        </div>
      </div>
    </template>
  </ap-popper>
</template>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

暗色主题

可以通过定义dark属性来指定弹出内容为深色主题

vue
<template>
  <ap-popper
    placement="bottom"
    dark
    @hide="hide"
    @show="show"
    @after-hide="afterHide"
  >
    <ap-button plain>Click</ap-button>
    <template #content>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
    </template>
  </ap-popper>
</template>

<script lang="ts" setup>
const hide = val => {
  console.log('hide', val)
}

const show = val => {
  console.log('show', val)
}

const afterHide = () => {
  console.log('afterHide', '在隐藏动画结束后触发')
}
</script>

自定义显示与影藏

可以通过v-model绑定控制显示与隐藏的值，trigger方式设置为 manual

vue
<template>
  <ap-popper v-model="visible" placement="top" trigger="manual">
    <ap-button @click="handleManual" plain>Click</ap-button>
    <template #content>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
    </template>
  </ap-popper>
</template>

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

const visible = ref(false)
const handleManual = () => {
  visible.value = !visible.value
}
</script>

自定义动画

可以通过设置transition-class来自定义显示与隐藏时的动画

TIP

transition-class 中可以包括： enter-active-class, leave-active-class, enter-from-class, leave-to-class

vue
<template>
  <ap-popper
    placement="bottom"
    dark
    :transition-class="getStyles()"
    :delay-close="1000"
  >
    <ap-button>Click</ap-button>
    <template #content>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
      <div>Some Content</div>
    </template>
  </ap-popper>
</template>

<script lang="ts" setup>
import { css, apply, tw } from 'apathia-ui'

const getStyles = () => {
  const placementTransition = css`
    ${apply`transform scale-y-100 opacity-100`}
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center top;
    &[data-popper-placement^='top'] {
      transform-origin: center bottom;
    }
  `
  const active = tw`${apply(placementTransition)}`
  const state = tw`opacity-0 transform scale-y-0`
  return {
    'enter-active-class': active,
    'leave-active-class': active,
    'enter-from-class': state,
    'leave-to-class': state,
  }
}
</script>

Props

prop	说明	类型	默认值
modelValue	是否展示（传参控制显隐）	boolean	false
distance	弹出框距离目标的长度	number	15
skidding	箭头与目标的偏移量	number	0
trigger	触发方式 'click', 'hover', 'focus', 'manual'	string	'click'
dark	暗色主题	boolean	false
placement	弹出框位置 'top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end',	string	'top'
content	弹出框内容	string,number	-
transitionClass	弹出消失动画自定义	object	-
showArrow	箭头显隐控制	boolean	true
delay	hover 方式延迟时间 ms	number	300
disabled	是否禁用	boolean	false
popperClass	弹出框类名	string	''
appendToBody	是否追加到 body 后	boolean	true
render	弹出框渲染内容	CustomRender	undefined
target	弹框目标元素	HTMLElement	undefined
delayClose	自动关闭，传参是时间，单位 ms	number	undefined

名称	说明	接收参数
-	default(默认插槽)，触发主体	-
content	显示内容	-

events

show: 弹出时触发参数是显隐状态的布尔值

hide: 关闭时触发参数是显隐状态的布尔值

afterHide: 关闭动画结束时触发无参数

Popper ​

基础用法 ​

template 用法 ​

functional 用法 ​

自定义内容 ​

暗色主题 ​

自定义显示与影藏 ​

自定义动画 ​

Props ​

Modal 插槽 （template 使用） ​

events ​