Popup 弹出泡
用于包裹页面内容
- 请注意：popup 的 reference 插槽只能有一个根节点，否则只渲染第一个节点
演示
使用方式：
popup的使用可以用传统插槽方式和虚拟元素触发
<template>
<div class="row">
<cl-popup content="我是最普通的调用方式">
<template #reference>
<cl-button>普通用法</cl-button>
</template>
</cl-popup>
<cl-popup
:virtualRef="buttonRef"
content="虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景"
>
</cl-popup>
<cl-button ref="buttonRef">virtualRef用法</cl-button>
</div>
</template>
<script setup lang="ts">
import { ComponentPublicInstance, ref } from 'vue'
const buttonRef = ref<ComponentPublicInstance<HTMLElement> | null>(null)
</script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>主题
属性 effect：dark、light；默认是 light
<template>
<div class="row">
<cl-popup content="light">
<template #reference>
<cl-button>light</cl-button>
</template>
</cl-popup>
<cl-popup effect="dark" content="dark">
<template #reference>
<cl-button>dark</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>不同方向弹出
方向：top、left、right、bottom；是弹出泡出现在目标元素的哪边对齐：start、 center、 end；
<template>
<div class="row">
<cl-popup placement="top-start">
<template #content> 上 - 左 </template>
<template #reference>
<cl-button>上 - 左</cl-button>
</template>
</cl-popup>
<cl-popup placement="top-center">
<template #content> 上 - 中 </template>
<template #reference>
<cl-button>上 - 中</cl-button>
</template>
</cl-popup>
<cl-popup placement="top-end">
<template #content> 上 - 右 </template>
<template #reference>
<cl-button>上 - 右</cl-button>
</template>
</cl-popup>
</div>
<div class="row">
<cl-popup placement="left-start">
<template #content> 左 - 上 </template>
<template #reference>
<cl-button>左 - 上</cl-button>
</template>
</cl-popup>
<cl-popup placement="left-center">
<template #content> 左 - 中 </template>
<template #reference> <cl-button>左 - 中</cl-button> </template>
</cl-popup>
<cl-popup placement="left-end">
<template #content> 左 - 下 </template>
<template #reference>
<cl-button>左 - 下</cl-button>
</template>
</cl-popup>
</div>
<div class="row">
<cl-popup placement="right-start">
<template #content> 右 - 上 </template>
<template #reference>
<cl-button>右 - 上</cl-button>
</template>
</cl-popup>
<cl-popup placement="right-center">
<template #content> 右 - 中 </template>
<template #reference>
<cl-button>右 - 中</cl-button>
</template>
</cl-popup>
<cl-popup placement="right-end">
<template #content> 右 - 下 </template>
<template #reference>
<cl-button>右 - 下</cl-button>
</template>
</cl-popup>
</div>
<div class="row">
<cl-popup placement="bottom-start">
<template #content> 下 - 左 </template>
<template #reference>
<cl-button>下 - 左</cl-button>
</template>
</cl-popup>
<cl-popup placement="bottom-center">
<template #content> 下 - 中 </template>
<template #reference>
<cl-button>下 - 中</cl-button>
</template>
</cl-popup>
<cl-popup placement="bottom-end">
<template #content> 下 - 右 </template>
<template #reference>
<cl-button>下 - 右</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>【超出提示】我是长文本，很长的文本，非常长长长长长长长长长。
超出截断
txtOverLine：最大行数，默认值 0 不限制超出，若设置，则超出才显示 popup，不超出不显示；
<template>
<cl-popup content="我是长文本，很长的文本，非常长长长长长长长长长">
<template #reference> 【不处理超出】我是长文本，很长的文本，非常长长长长长长长长长。 </template>
</cl-popup>
<cl-popup content="【超出提示】我是长文本，很长的文本，非常长长长长长长长长长。" :txtOverLine="1">
<template #reference>
<p style="max-width: 300px">【超出提示】我是长文本，很长的文本，非常长长长长长长长长长。</p>
</template>
</cl-popup>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>触发方式
提供三种触发方式：hover、click、manual,manual由开发者自行控制pop显示隐藏状态,结合v-model使用,组件内部不提供事件
<template>
<div class="row">
<cl-popup content="hover">
<template #reference>
<cl-button>hover</cl-button>
</template>
</cl-popup>
<cl-popup content="click" trigger="click">
<template #reference>
<cl-button>click</cl-button>
</template>
</cl-popup>
<cl-popup content="munual" trigger="manual" v-model="show">
<template #reference>
<cl-button @click="show = !show">manual</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
</script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>延迟时间
trigger：hover 模式提供两种延迟，延迟出现 openDelay、延迟隐藏 closeDelay；默认 100ms。openDelay:0 立即出现（注意这会在 reference 多且密时，只要你稍稍动动鼠标，就会满屏的泡，closeDelay:0 立即隐藏（注意需要预留用户鼠标移入弹出泡的时间，除非你不需要 enterable）
<template>
<div class="row">
<cl-popup :openDelay="0" content="我是立即出现', openDelay: 0">
<template #reference>
<cl-button>立即出现</cl-button>
</template>
</cl-popup>
<cl-popup :closeDelay="0" content="我是立即隐藏', closeDelay: 0">
<cl-button>立即隐藏</cl-button>
<template #reference>
<cl-button>立即隐藏</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>偏移
offset 设置泡在上下左右四个方向上的偏移，可以为负值。默认单位：px，不支持 vh、vw、%，popup 上方弹出，left 值减 offset；popup 下方弹出，left 值加 offset；popup 左侧弹出，top 值减 offset；popup 右侧弹出，top 值加 offset；
<template>
<div class="row">
<cl-popup placement="top-center" :offset="20" content="top-center">
<template #reference>
<cl-button>top-center</cl-button>
</template>
</cl-popup>
<cl-popup placement="bottom-center" :offset="20" content="bottom-center">
<template #reference>
<cl-button>bottom-center</cl-button>
</template>
</cl-popup>
<cl-popup placement="left-center" :offset="20" content="left-center">
<template #reference>
<cl-button>left-center</cl-button>
</template>
</cl-popup>
<cl-popup placement="right-center" :offset="20" content="right-center">
<template #reference>
<cl-button>right-center</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>箭头设置
visible-arrow 设置显示隐藏箭头；arrow-offset 设置箭头的位置，默认值 0，单位px；【不设置值】箭头始终显示在中间，优先显示在 reference 元素中间，其次是泡中间。设置值】任何情况下都显示在设置的位置。设置的值超出极限，会显示为【不设置值】的效果
<template>
<div class="row">
<cl-popup placement="top-center" content="top-center">
<template #reference>
<cl-button>arrow-offset：0</cl-button>
</template>
</cl-popup>
<cl-popup placement="top-center" :arrow-offset="5" content="top-center">
<template #reference>
<cl-button>arrow-offset：5</cl-button>
</template>
</cl-popup>
<cl-popup placement="top-center" :arrow-offset="500" content="top-center">
<template #reference>
<cl-button>arrow-offset：500</cl-button>
</template>
</cl-popup>
<cl-popup placement="top-center" :visible-arrow="false" content="top-center">
<template #reference>
<cl-button>隐藏箭头</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>初始状态
v-model / value：可以设置 pop 初始是否显示。默认隐藏，不创建pop，disabled：是否不能激活弹出信息
<template>
<div class="row">
<cl-popup :modelValue="true" content="top-center">
<template #reference>
<cl-button>初始显示,状态可用</cl-button>
</template>
</cl-popup>
<cl-popup :modelValue="true" disabled content="top-center">
<template #reference>
<cl-button>初始显示,状态不可用</cl-button>
</template>
</cl-popup>
<cl-popup disabled content="top-center">
<template #reference>
<cl-button>初始隐藏，状态不可用</cl-button>
</template>
</cl-popup>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import './popup-demo.scss';
</style>input 参数描述
| 参数 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model / value | 默认状态是否可见 | Boolean | - | false |
| disabled | pop 是否可用 | Boolean | - | false |
| effect | 主题 | String | dark light | dark |
| trigger | 触发方式 | String | click hover manual | hover |
| placement | 出现位置 | String | - | top-center |
| content | 内容 | string | - | - |
| txtOverLine | 超出最大行数 | Number | - | 0 |
| preRender | 是否需要预渲染 | Boolean | - | false |
| enterable | 鼠标是否可进入到泡中 | Boolean | - | true |
| popupClass | 自定义 pop 样式 | String | - | - |
| offset | 泡偏移量（px） | Number | - | 0 |
| visibleArrow | 是否显示箭头 | Boolean | - | true |
| arrowOffset | 箭头偏移 | Number | - | 0 |
| openDelay | 延迟出现（hover 触发) | Number | - | 100 ms |
| closeDelay | 延迟隐藏（hover 触发) | Number | - | 100 ms |
| animated | 淡入动画 | Boolean | - | true |
| virtualRef | 虚拟触发的元素 | ComponentPublicInstance<HTMLElement>| <HTMLElement> | - | null |
| outsideAutoCloseWithManual | 手动触发模式下，是否点击内容外自动关闭 | boolean | - | false |
popup 插槽
| 参数 | 描述 |
|---|---|
| content | 内容 |
| reference | 触发 popup 显示的 元素 ，popup 的 reference 插槽只能有一个根节点，否则只渲染第一个节点 |