49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
content?: string | number | null
|
|
lines?: 1 | 2 | 3
|
|
}>(), {
|
|
content: '',
|
|
lines: 1,
|
|
})
|
|
|
|
const text = computed(() => props.content === null || props.content === undefined ? '' : String(props.content))
|
|
const lineStyle = computed(() => ({ '--cc-line-clamp': props.lines }))
|
|
const tooltipVisible = ref(false)
|
|
|
|
function showTooltip() {
|
|
if (text.value) tooltipVisible.value = true
|
|
}
|
|
|
|
function hideTooltip() {
|
|
tooltipVisible.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-tooltip
|
|
:content="text || '—'"
|
|
:disabled="!text"
|
|
:visible="Boolean(text) && tooltipVisible"
|
|
placement="top-start"
|
|
>
|
|
<span
|
|
class="line-clamp-text"
|
|
:style="lineStyle"
|
|
:tabindex="text ? 0 : undefined"
|
|
:aria-label="text || '—'"
|
|
@mouseenter="showTooltip"
|
|
@mouseleave="hideTooltip"
|
|
@focus="showTooltip"
|
|
@blur="hideTooltip"
|
|
>{{ text || '—' }}</span>
|
|
</el-tooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.line-clamp-text { display: -webkit-box; min-width: 0; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cc-line-clamp); overflow-wrap: anywhere; white-space: pre-line; }
|
|
.line-clamp-text:focus-visible { outline: 2px solid color-mix(in srgb, var(--cc-primary) 45%, transparent); outline-offset: 2px; }
|
|
</style>
|