I've implemented a function that checks for truncated text and, if found, displays a button to expand the hidden content.
I have created a code demo with detailed explanations. Although I am not encountering any errors, the logic does not seem to be working as expected. Any guidance or feedback would be highly appreciated.
SCRIPT:
const info = ref<HTMLElement | null>(null)
onMounted(() => {
// initialize 'info' reference status
checkInfoRefStatus()
})
function checkInfoRefStatus() {
if (info.value) {
const selectedElement = info.value
return isTextTruncated.value = selectedElement.scrollHeight > selectedElement.clientHeight
}
}
TEMPLATE:
<div>
<div ref="info" :class="isExpanded ? 'truncate' : ''">
{{ data?.information }}
</div>
<span
v-if="isTextTruncated"
@click="isExpanded = !isExpanded"
>
{{ toggleCtaLabel }}
</span>
</div>