如何在 vue3 中使用了解更多按钮进行线夹

Question

我在我的一个项目中使用 vue3 和 vitejs，我偶然发现了一个问题。我有以下代码。

<div>
  <p class="line-clamp-4">Some really long text here...</p>
  <a id="read-more" href="readmore.html">Read more</a>
</div>

我在这里使用的是 tailwindcss，我能够限制 4 条线。我有一份这些文本的列表，并不是每个文本都有线夹。所以，我只想在应用线夹时显示阅读更多按钮。现在，我如何知道线夹应用到此文本并且我必须显示阅读更多按钮？

Answer 1

这是我为实现这一目标所做的工作：

@foreach($module->captions as $caption)
<div class="mt-1 relative">
    <div id="body-{{$caption->id}}" class="text-md leading-7 text-gray-700 font-normal whitespace-pre-line line-clamp-6">
        {{ $caption->body }}
    </div>
</div>

<div id="readMore-{{$caption->id}}" class="hidden flex justify-center absolute bottom-0 left-0 bg-white w-full rounded-b-lg">
    <p class="text-blue-600 cursor-pointer py-2"></p>
</div>
@endforeach

<script>
    let elements = document.getElementsByClassName('line-clamp-6')

    Array.from(elements).forEach((element) => {
        let captionId = element.id.split('-')[1];

        let body = document.getElementById('body-' + captionId)

        let readMore = document.getElementById('readMore-' + captionId)

        if (element.clientHeight === 168) {
            readMore.firstElementChild.innerText = 'Read More'
            readMore.classList.remove('hidden')

            readMore.addEventListener('click', (el) => {
                if (body.classList.contains('line-clamp-6')) {
                    body.classList.remove('line-clamp-6')
                    readMore.firstElementChild.innerText = 'Read Less'
                } else {
                    body.classList.add('line-clamp-6')
                    readMore.firstElementChild.innerText = 'Read More'
                }
            })
        }
    })
</script>

在我的例子中，我使用 foreach 循环访问一些数据，但您仍然可以根据需要自定义它。基本上，我得到了 class 名称为 line-clamp-6 的所有元素。然后循环遍历这些元素以查看它们的 clientHeight 是否为 168。如果是，则它们需要阅读更多 link.

请记住，您可能需要检查不同的 clientHeight。

然后我会听到点击阅读更多 link 如果 line-clamp-6 存在则我们删除它否则我们添加它。

希望对您有所帮助。我在最后一个小时一起完成了这个，所以可能有更好的方法，但这似乎对我有用。

如何在 vue3 中使用了解更多按钮进行线夹

How to do line-clamp with a learn more button in vue3

html

css

tailwind-css

vuejs3

vite