Despite searching through the VUE official website and various other sources, I have not been able to find a satisfactory solution. I am reaching out for assistance, thank you in advance.
<div class="tag-item" :ref="`tagItem_${index}`">
<el-tooltip effect="dark" :content="tag.name" placement="top">
<el-link :underline="false" class="title" @click="getPostByTag(tag)">
<el-image :src="tag.img" style="height: 32px; z-index: 99; width: 32px" lazy />
<span class="content" :id="`content_${index}`" :class="judgeScroll(index)">{{ tag.name }}</span>
</el-link>
</el-tooltip>
</div>
const tagItem_0 = ref()
const judgeScroll = (index) => {
nextTick(() => {
let contentWidth = document.getElementById(`content_${index}`).clientWidth
if (+contentWidth > +tagItem_0.value[0].clientWidth) {
document.getElementById(`content_${index}`).classList.add('scroll')
return 'scroll'
}
})
}
.tag-list {
margin: 10px;
min-height: 32px;
min-width: 10%;
.tag-item {
width: 100%;
padding: 1%;
max-width: 100%;
.title {
color: #262626;
display: block;
line-height: 20px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: normal;
max-width: inherit;
align-items: center;
.content {
white-space: nowrap;
overflow: hidden;
}
.scroll {
animation: scrollText 10s linear infinite;
@keyframes scrollText {
0% {
transform: translateX(30%);
}
100% {
transform: translateX(-100%);
}
}
}
}
}
}
In my concept, when the text within the span exceeds the container's width, I want to apply CSS styling to make it scroll horizontally. If the 'scroll' style is applied successfully, it signifies success.
If the 'scroll' style is successfully applied, it should function like this scroll example.
I intend to add the 'scroll' style to all <span> elements wider than their parent node. However, despite console logs showing correct values, the desired 'scroll' style is not returning as expected until the classList.add statement.
I currently have two primary questions:
1. The necessity of including nextTick,tagItem.value[0] to prevent null value.
2. Why the 'scroll' style is not returning upon execution.
Furthermore, when using the above setup as a component and multiple instances appear on the same page, the style gets added to all components simultaneously. Is there a workaround for this scenario?
Thank you for taking the time to read this. Any feedback or suggestions are greatly appreciated.