xingyu
2 years ago
5 changed files with 343 additions and 0 deletions
@ -0,0 +1,4 @@ |
|||||||
|
import ellipsisText from './src/EllipsisText.vue' |
||||||
|
import { withInstall } from '@/utils' |
||||||
|
|
||||||
|
export const EllipsisText = withInstall(ellipsisText) |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { computed, nextTick, ref, watchEffect } from 'vue' |
||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import Tooltip from './Tooltip.vue' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
maxWidth?: number | string // 文本最大宽度 |
||||||
|
line?: number // 最大行数 |
||||||
|
expand?: boolean // 是否启用点击文本展开全部 |
||||||
|
tooltip?: boolean // 是否启用文本提示框 |
||||||
|
// 以下均为 tooltip 组件属性 |
||||||
|
tooltipMaxWidth?: number // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致 |
||||||
|
tooltipFontSize?: number // 提示文本字体大小，单位px，优先级高于 overlayStyle |
||||||
|
tooltipColor?: string // 提示文本字体颜色，优先级高于 overlayStyle |
||||||
|
tooltipBackgroundColor?: string // 提示框背景颜色，优先级高于 overlayStyle |
||||||
|
tooltipOverlayStyle?: CSSProperties // 提示框内容区域样式 |
||||||
|
} |
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
maxWidth: '100%', |
||||||
|
line: undefined, |
||||||
|
expand: false, |
||||||
|
tooltip: true, |
||||||
|
tooltipMaxWidth: undefined, |
||||||
|
tooltipFontSize: 14, |
||||||
|
tooltipColor: '#FFF', |
||||||
|
tooltipBackgroundColor: 'rgba(0, 0, 0, .85)', |
||||||
|
tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }), |
||||||
|
}) |
||||||
|
const emit = defineEmits(['expandChange']) |
||||||
|
const textMaxWidth = computed(() => { |
||||||
|
if (typeof props.maxWidth === 'number') |
||||||
|
return `${props.maxWidth}px` |
||||||
|
|
||||||
|
return props.maxWidth |
||||||
|
}) |
||||||
|
const showTooltip = ref() |
||||||
|
const ellipsis = ref() |
||||||
|
const defaultTooltipMaxWidth = ref() |
||||||
|
watchEffect(() => { |
||||||
|
showTooltip.value = props.tooltip |
||||||
|
}) |
||||||
|
watchEffect( |
||||||
|
() => { |
||||||
|
if (props.tooltip) { |
||||||
|
if (props.tooltipMaxWidth) |
||||||
|
defaultTooltipMaxWidth.value = props.tooltipMaxWidth |
||||||
|
|
||||||
|
else |
||||||
|
defaultTooltipMaxWidth.value = ellipsis.value.offsetWidth + 24 |
||||||
|
} |
||||||
|
}, |
||||||
|
{ flush: 'post' }, |
||||||
|
) |
||||||
|
function onExpand() { |
||||||
|
if (ellipsis.value.style['-webkit-line-clamp']) { |
||||||
|
if (props.tooltip) { |
||||||
|
showTooltip.value = false |
||||||
|
nextTick(() => { |
||||||
|
ellipsis.value.style['-webkit-line-clamp'] = '' |
||||||
|
}) |
||||||
|
} |
||||||
|
else { |
||||||
|
ellipsis.value.style['-webkit-line-clamp'] = '' |
||||||
|
} |
||||||
|
emit('expandChange', true) |
||||||
|
} |
||||||
|
else { |
||||||
|
if (props.tooltip) |
||||||
|
showTooltip.value = true |
||||||
|
|
||||||
|
ellipsis.value.style['-webkit-line-clamp'] = props.line |
||||||
|
emit('expandChange', false) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<Tooltip |
||||||
|
v-if="showTooltip" |
||||||
|
:max-width="defaultTooltipMaxWidth" |
||||||
|
:font-size="tooltipFontSize" |
||||||
|
:color="tooltipColor" |
||||||
|
:background-color="tooltipBackgroundColor" |
||||||
|
:overlay-style="tooltipOverlayStyle" |
||||||
|
> |
||||||
|
<template #tooltip> |
||||||
|
<slot name="tooltip"> |
||||||
|
<slot /> |
||||||
|
</slot> |
||||||
|
</template> |
||||||
|
<div |
||||||
|
ref="ellipsis" |
||||||
|
class="m-ellipsis" |
||||||
|
:class="[line ? 'ellipsis-line' : 'not-ellipsis-line', { 'cursor-pointer': expand }]" |
||||||
|
:style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`" |
||||||
|
v-bind="$attrs" |
||||||
|
@click="expand ? onExpand() : () => false" |
||||||
|
> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
</Tooltip> |
||||||
|
<div |
||||||
|
v-else |
||||||
|
ref="ellipsis" |
||||||
|
class="m-ellipsis" |
||||||
|
:class="[line ? 'ellipsis-line' : 'not-ellipsis-line', { 'cursor-pointer': expand }]" |
||||||
|
:style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`" |
||||||
|
v-bind="$attrs" |
||||||
|
@click="expand ? onExpand() : () => false" |
||||||
|
> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.m-ellipsis { |
||||||
|
overflow: hidden; |
||||||
|
cursor: text; |
||||||
|
} |
||||||
|
|
||||||
|
.ellipsis-line { |
||||||
|
display: -webkit-inline-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
} |
||||||
|
|
||||||
|
.not-ellipsis-line { |
||||||
|
display: inline-block; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
vertical-align: bottom; |
||||||
|
} |
||||||
|
|
||||||
|
.cursor-pointer { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { ref } from 'vue' |
||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import { cancelRaf, rafTimeout } from './_utils' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
maxWidth?: number // 提示框内容最大宽度，单位px |
||||||
|
content?: string // 展示的文本 string | slot |
||||||
|
tooltip?: string // 提示的文本 string | slot |
||||||
|
fontSize?: number // 提示文本字体大小，单位px，优先级高于 overlayStyle |
||||||
|
color?: string // 提示文本字体颜色，优先级高于 overlayStyle |
||||||
|
backgroundColor?: string // 提示框背景颜色，优先级高于 overlayStyle |
||||||
|
overlayStyle?: CSSProperties // 提示框内容区域样式 |
||||||
|
} |
||||||
|
withDefaults(defineProps<Props>(), { |
||||||
|
maxWidth: 120, |
||||||
|
content: '暂无内容', |
||||||
|
tooltip: '暂无提示', |
||||||
|
fontSize: 14, |
||||||
|
color: '#FFF', |
||||||
|
backgroundColor: 'rgba(0, 0, 0, .85)', |
||||||
|
overlayStyle: () => ({}), |
||||||
|
}) |
||||||
|
const emit = defineEmits(['openChange']) |
||||||
|
const visible = ref(false) |
||||||
|
const hideTimer = ref() |
||||||
|
const top = ref(0) // 提示框top定位 |
||||||
|
const left = ref(0) // 提示框left定位 |
||||||
|
const contentRef = ref() // 声明一个同名的模板引用 |
||||||
|
const tooltipRef = ref() // 声明一个同名的模板引用 |
||||||
|
function getPosition() { |
||||||
|
const contentWidth = contentRef.value && contentRef.value.offsetWidth // 展示文本宽度 |
||||||
|
const tooltipWidth = tooltipRef.value && tooltipRef.value.offsetWidth // 提示文本宽度 |
||||||
|
const tooltipHeight = tooltipRef.value && tooltipRef.value.offsetHeight // 提示文本高度 |
||||||
|
top.value = tooltipHeight + 4 |
||||||
|
left.value = (tooltipWidth - contentWidth) / 2 |
||||||
|
} |
||||||
|
function onShow() { |
||||||
|
getPosition() |
||||||
|
cancelRaf(hideTimer.value) |
||||||
|
visible.value = true |
||||||
|
emit('openChange', visible.value) |
||||||
|
} |
||||||
|
function onHide(): void { |
||||||
|
hideTimer.value = rafTimeout(() => { |
||||||
|
visible.value = false |
||||||
|
emit('openChange', visible.value) |
||||||
|
}, 100) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="m-tooltip" @mouseenter="onShow" @mouseleave="onHide"> |
||||||
|
<div |
||||||
|
ref="tooltipRef" |
||||||
|
class="m-tooltip-content" |
||||||
|
:class="{ 'show-tip': visible }" |
||||||
|
:style="`--tooltip-font-size: ${fontSize}px; --tooltip-color: ${color}; --tooltip-background-color: ${backgroundColor}; max-width: ${maxWidth}px; top: ${-top}px; left: ${-left}px;`" |
||||||
|
@mouseenter="onShow" |
||||||
|
@mouseleave="onHide" |
||||||
|
> |
||||||
|
<div class="u-tooltip" :style="overlayStyle"> |
||||||
|
<slot name="tooltip"> |
||||||
|
{{ tooltip }} |
||||||
|
</slot> |
||||||
|
</div> |
||||||
|
<div class="m-tooltip-arrow"> |
||||||
|
<span class="u-tooltip-arrow" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div ref="contentRef"> |
||||||
|
<slot>{{ content }}</slot> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.m-tooltip { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
.m-tooltip-content { |
||||||
|
position: absolute; |
||||||
|
z-index: 9999; |
||||||
|
width: max-content; |
||||||
|
padding-bottom: 12px; |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0; |
||||||
|
transition: |
||||||
|
transform 0.25s, |
||||||
|
opacity 0.25s; |
||||||
|
transform: scale(0.8); // 缩放变换 |
||||||
|
transform-origin: 50% 75%; |
||||||
|
|
||||||
|
.u-tooltip { |
||||||
|
min-width: 32px; |
||||||
|
min-height: 32px; |
||||||
|
padding: 6px 8px; |
||||||
|
font-size: var(--tooltip-font-size); |
||||||
|
line-height: 1.5714; |
||||||
|
color: var(--tooltip-color); |
||||||
|
text-align: start; |
||||||
|
text-decoration: none; |
||||||
|
word-wrap: break-word; |
||||||
|
background-color: var(--tooltip-background-color); |
||||||
|
border-radius: 6px; |
||||||
|
box-shadow: |
||||||
|
0 6px 16px 0 rgb(0 0 0 / 8%), |
||||||
|
0 3px 6px -4px rgb(0 0 0 / 12%), |
||||||
|
0 9px 28px 8px rgb(0 0 0 / 5%); |
||||||
|
} |
||||||
|
|
||||||
|
.m-tooltip-arrow { |
||||||
|
position: absolute; |
||||||
|
bottom: 12px; |
||||||
|
left: 50%; |
||||||
|
z-index: 9; |
||||||
|
display: block; |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
overflow: hidden; |
||||||
|
pointer-events: none; |
||||||
|
content: ''; |
||||||
|
transform: translateX(-50%) translateY(100%) rotate(180deg); |
||||||
|
|
||||||
|
&::before { |
||||||
|
position: absolute; |
||||||
|
inset-inline-start: 0; |
||||||
|
bottom: 0; |
||||||
|
width: 16px; |
||||||
|
height: 8px; |
||||||
|
clip-path: path( |
||||||
|
'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z' |
||||||
|
); |
||||||
|
background-color: var(--tooltip-background-color); |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-inline: 0; |
||||||
|
bottom: 0; |
||||||
|
z-index: 0; |
||||||
|
width: 8.9706px; |
||||||
|
height: 8.9706px; |
||||||
|
margin: auto; |
||||||
|
content: ''; |
||||||
|
background: transparent; |
||||||
|
border-radius: 0 0 2px; |
||||||
|
box-shadow: 3px 3px 7px rgb(0 0 0 / 10%); |
||||||
|
transform: translateY(50%) rotate(-135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.show-tip { |
||||||
|
pointer-events: auto; |
||||||
|
opacity: 1; |
||||||
|
transform: scale(1); // 缩放变换 |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
// cancelAnimationFrame
|
||||||
|
export const cancelAnimationFrame = window.cancelAnimationFrame |
||||||
|
// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
|
||||||
|
export function rafTimeout(fn: Function, delay = 0, interval = false): object { |
||||||
|
const requestAnimationFrame |
||||||
|
= typeof window !== 'undefined' ? window.requestAnimationFrame : () => {} |
||||||
|
let start: any = null |
||||||
|
const raf = { |
||||||
|
// 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
|
||||||
|
id: requestAnimationFrame(timeElapse), |
||||||
|
} |
||||||
|
function timeElapse(timestamp: number) { |
||||||
|
/* |
||||||
|
timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻 |
||||||
|
*/ |
||||||
|
if (!start) |
||||||
|
start = timestamp |
||||||
|
|
||||||
|
const elapsed = timestamp - start |
||||||
|
if (elapsed >= delay) { |
||||||
|
fn() // 执行目标函数func
|
||||||
|
if (interval) { |
||||||
|
// 使用间歇调用
|
||||||
|
start = null |
||||||
|
raf.id = requestAnimationFrame(timeElapse) |
||||||
|
} |
||||||
|
} |
||||||
|
else { |
||||||
|
raf.id = requestAnimationFrame(timeElapse) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return raf |
||||||
|
} |
||||||
|
// 用于取消 rafTimeout 函数
|
||||||
|
export function cancelRaf(raf: { id: number }): void { |
||||||
|
const cancelAnimationFrame |
||||||
|
= typeof window !== 'undefined' ? window.cancelAnimationFrame : () => {} |
||||||
|
if (raf && raf.id) |
||||||
|
cancelAnimationFrame(raf.id) |
||||||
|
} |
||||||
Reference in new issue