<template>
<div class="container" :style="w_h" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<pre class="ellipsis
-pre" ref="preElement" v
-html="content" :style="style"></pre>
<span v
-if="show">
...
</span>
<!
-- <NCard v
-if="showPopup" class="popup" :style="popupStyle">
<pre v
-html="content"></pre>
</NCard>
-->
<div v
-if="showPopup" class="popup" :style="popupStyle">
<pre v
-html="content"></pre>
</div>
</div>
</template>
<script setup lang="ts">
import { NCard, NText } from 'naive
-ui';
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
const props = defineProps<{
content: string;
width?: string;
height?: string;
style?: {};
}>();
const preElement = ref<HTMLElement | null>(null);
const showPopup = ref(false);
const style = ref(props.style ?? {});
const popupStyle = ref();
const show = ref(false)
const contentLen = ref(0)
const w_h = ref({ width: props.width, height: props.height });
let intervalId: number | null = null;
const handleMouseEnter = (event: MouseEvent) => {
if (show.value) {
if (intervalId) window.clearInterval(intervalId);
intervalId = window.setTimeout(() => {
if (preElement.value) {
let w = window.innerWidth
let h = window.innerHeight
console.log(w / 2, h / 2)
const rect = preElement.value.getBoundingClientRect();
if (rect.y > h / 2) {
popupStyle.value = { bottom: '0px', right: '0px', minWidth: props.width, minHeight: props.height }
} else {
popupStyle.value = { top: '0px', right: '0px', minWidth: props.width, minHeight: props.height }
}
console.log(rect)
// popupStyle.value = {
// top: `${rect.bottom + window.scrollY}px`,
// left: `${rect.left + window.scrollX}px`
};
showPopup.value = true;
}, 1000);
}
};
const handleMouseLeave = () => {
if (intervalId) window.clearInterval(intervalId);
showPopup.value = false;
};
const check
Overflow = () => {
if (preElement.value) {
const element = preElement.value;
const
overflowStyle = window.getComputedStyle(element).
overflow;
if (
overflowStyle === 'hidden') {
console.log('
overflow: hidden 生效了');
} else {
console.log('
overflow: hidden 没有生效');
}
// 验证内容是否溢出
const is
OverflowingVertically = element.scrollHeight > element.clientHeight;
const is
OverflowingHorizontally = element.scrollWidth > element.clientWidth;
if (is
OverflowingVertically || is
OverflowingHorizontally) {
console.log('内容溢出了容器');
show.value = true
} else {
console.log('内容没有溢出容器');
}
} else {
console.log('元素未被正确引用');
}
};
onMounted(() => {
if (preElement.value) {
preElement.value.style.width = props.width || '300px';
preElement.value.style.height = props.height || '100px';
}
check
Overflow()
});
onUnmounted(() => {
if (intervalId) window.clearInterval(intervalId);
});
// 使用 watch 监听 props.content 的变化
watch(() => props.content, (newContent) => {
if (newContent) {
contentLen.value = newContent.split('\n').length;
} else {
contentLen.value = 0;
}
}, { immediate: true });
</script>
<style scoped lang="scss">
.container {
position: relative;
place
-items: center;
/* 垂直和水平居中 */
width: 100%;
height: 100%;
}
.ellipsis
-pre {
display: flex;
align
-items: center;
//white
-space: pre
-wrap; // 保留空白符序列，但是正常地进行
换行
word
-wrap: break
-word; // 在长单词或 URL 地址内部进行
换行
overflow: hidden; // 隐藏溢出的内容
text
-overflow: ellipsis; // 显示省略号
//border: 1px solid #000;
padding: 2px;
box-sizing: border
-box;
width: 100%;
height: 100%;
text
-align: left;
position: absolute;
line
-height: 1.1;
}
.popup {
position: absolute;
background
-color: #fff;
border: 1px solid #ebe7e7;
padding: 10px;
box-shadow: 1 2px 10px rgba(0, 0, 0, 0.1);
z
-index: 1001;
max
-width: 50vw;
max
-height: 30vh;
overflow: auto;
white
-space: pre
-wrap; // 保留空白符序列，但是正常地进行
换行
word
-wrap: break
-word; // 在长单词或 URL 地址内部进行
换行
}
span {
position: absolute;
right: 0px;
top: 100;
bottom: 0;
z
-index: 1000;
color: rgba(71, 150, 241, 0.726);
}
</style> 优化这个组件 美化弹窗
样式
本文深入讲解CSS中的overflow属性，阴影效果，鼠标样式调整，input和textarea的样式控制，以及文本的换行和显示策略，帮助读者掌握更高级的网页布局和样式设计技巧。
扫一扫
2411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
