效果
image.png
vue2
<template>
<div class="cy-text" ref="cyText" :style="textStyle" @mouseenter="mouseenter" @mouseleave="mouseleave">{{value}}
</div>
</template>
<script>
import { getScrollContainer } from '@/utils/dom'
export default {
// 显示文字组件，可以设置最多显示几行，超过后会隐藏并且鼠标hover显示全部信息（需要给组件设置宽度）
name: 'CyText',
props: {
value: {
type: String,
default: ''
},
row: { //最多显示几行，超过后会...隐藏 为0时不隐藏
type: [Number, String],
default: 0
}
},
computed: {
cyText() {
return this.$refs.cyText
},
scrollWrap() {
return getScrollContainer(this.$refs.cyText, true)
}
},
data() {
return {
isShowHover: false,
textStyle: {},
div: null
}
},
watch: {
'row': function(val) {
this.init()
},
'value': function() {
this.isShowHover = false
this.textStyle = {
cursor: 'text'
}
this.$nextTick(() => {
this.getStyle(this.row - 0)
})
}
},
mounted() {
this.init()
},
beforeDestroy() {
},
methods: {
init() {
this.div = document.querySelector('.cy-hover')
if (!this.div && this.row - 0) {
this.div = document.createElement('div')
this.div.className = 'cy-hover'
this.div.style.top = 0
this.div.style.left = 0
document.body.append(this.div)
}
if (this.div && this.row - 0) {
this.getStyle(this.row - 0)
}
},
getStyle(val) {
let lineHeight = getComputedStyle(this.cyText).lineHeight.replace('px', '') - 0 || 20
let height = getComputedStyle(this.cyText).height.replace('px', '') - 0
if (height > lineHeight * val) {
this.isShowHover = true
this.textStyle = {
height: `${lineHeight * val}px`,
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
webkitLineClamp: val,
webkitBoxOrient: 'vertical',
cursor: 'pointer'
}
} else {
this.isShowHover = false
this.textStyle = {
cursor: 'text'
}
}
},
mouseenter(e) {
if (!this.isShowHover) {
return
}
this.div.innerHTML = this.value
let box = e.target.getBoundingClientRect()
let divRect = this.div.getBoundingClientRect()
let windowHeight = innerHeight || document.documentElement.clientHeight
let top = ''
let left = ''
left = box.left + (box.width - divRect.width) / 2 + 'px'
if(box.bottom + divRect.height - windowHeight > 10) {
top = box.top - divRect.height + 'px'
} else{
top = box.top + box.height + 'px'
}
this.div.style.top = top
this.div.style.left = left
this.div.classList.add('active')
this.scrollWrap.addEventListener('scroll', this.scrollFun)
},
mouseleave(e) {
if (!this.isShowHover) {
return
}
if (e.relatedTarget !== this.div) {
this.scrollFun()
}
this.div.onmouseleave = () => {
this.scrollFun()
}
},
// 最近的dom滚动时,关闭弹窗
scrollFun() {
this.div.style.top = 0
this.div.style.left = 0
this.div.classList.remove('active')
this.scrollWrap.removeEventListener('scroll', this.scrollFun)
}
}
}
</script>
<style scoped lang="scss">
.cy-text {
position: relative;
}
</style>
<style lang="scss">
.cy-hover {
position: absolute;
background-color: #303133;
color: #fff;
font-size: 14px;
line-height: 1.4;
padding: 6px 10px;
border-radius: 5px;
border: 1px solid #eee;
max-width: 400px;
transition: opacity 0.3s linear;
z-index: -1;
opacity: 0;
&.active {
z-index: 1999;
opacity: 1;
}
}
</style>
vue3
<template>
<div class="cy-text" ref="cyTextRef" :style="textStyle" @mouseenter="mouseenter" @mouseleave="mouseleave">{{props.tipText}}
</div>
</template>
<script setup lang="ts" name="VueText">
import { ref, nextTick, onMounted ,watch} from 'vue'
import { getScrollContainer } from './dom'
const props = defineProps({
tipText:{
type:String,
default:''
},
row: { //最多显示几行，超过后会...隐藏 为0时不隐藏
type: [Number, String],
default: 2
}
})
const cyTextRef = ref<Nullable<HTMLElement | any>>(null)
var isShowHover:Boolean = false
const textStyle:any = ref({})
var div:any = null
watch(() => props.row,(val) => {
init()
})
watch(() => props.tipText,(val) => {
isShowHover = false
textStyle.value = {
cursor: 'text'
}
nextTick(() => {
getStyle(props.row - 0)
})
})
onMounted(()=>{
init()
})
function init() {
div = document.querySelector('.cy-hover')
if (!div && props.row - 0) {
div = document.createElement('div')
div.className = 'cy-hover'
div.style.top = 0
div.style.left = 0
document.body.append(div)
}
if (div && props.row - 0) {
getStyle(props.row - 0)
}
}
function getStyle(val) {
let lineHeight = getComputedStyle(cyTextRef.value).lineHeight.replace('px', '') - 0 || 20
let height = getComputedStyle(cyTextRef.value).height.replace('px', '') - 0
if (height > lineHeight * val) {
isShowHover = true
textStyle.value = {
height: `${lineHeight * val}px`,
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
webkitLineClamp: val,
webkitBoxOrient: 'vertical',
cursor: 'pointer'
}
} else {
isShowHover = false
textStyle.value = {
cursor: 'text'
}
}
}
function mouseenter(e) {
if (!isShowHover) {
return
}
div.innerHTML = props.tipText
let box = e.target.getBoundingClientRect()
let divRect = div.getBoundingClientRect()
let windowHeight = innerHeight || document.documentElement.clientHeight
let top = ''
let left = ''
left = box.left + (box.width - divRect.width) / 2 + 'px'
if(box.bottom + divRect.height - windowHeight > 10) {
top = box.top - divRect.height + 'px'
} else{
top = box.top + box.height + 'px'
}
div.style.top = top
div.style.left = left
div.classList.add('active')
getScrollContainer(cyTextRef.value, true).addEventListener('scroll', scrollFun)
}
function mouseleave(e) {
if (!isShowHover) {
return
}
if (e.relatedTarget !== div) {
scrollFun()
}
div.onmouseleave = () => {
scrollFun()
}
}
// 最近的dom滚动时,关闭弹窗
function scrollFun() {
div.style.top = 0
div.style.left = 0
div.classList.remove('active')
getScrollContainer(cyTextRef.value, true).removeEventListener('scroll', scrollFun)
}
</script>
<style scoped lang="scss">
.cy-text {
position: relative;
}
</style>
<style lang="scss">
.cy-hover {
position: absolute;
background-color: #303133;
color: #fff;
font-size: 14px;
line-height: 1.4;
padding: 6px 10px;
border-radius: 5px;
border: 1px solid #eee;
max-width: 400px;
transition: opacity 0.3s linear;
z-index: -1;
opacity: 0;
&.active {
z-index: 1999;
opacity: 1;
}
}
</style>
dom.js
// 获取滚动的dom
export function getScrollContainer(el, vertical) {
let parent = el;
while (parent) {
if ([window, document, document.documentElement].includes(parent)) {
return window;
}
if (isScroll(parent, vertical)) {
return parent;
}
parent = parent.parentNode;
}
return parent;
}
export function isScroll(el, vertical) {
const determinedDirection = vertical !== null || vertical !== undefined;
const overflow = determinedDirection ?
vertical ?
getComputedStyle(el)['overflow-y'] :
getComputedStyle(el)['overflow-x'] :
getComputedStyle(el)['overflow'];
return overflow.match(/(scroll|auto)/);
}
