文字的展开与收起功能

项目中碰到超过四行得有个展开按钮,点击展开显示所有内容,不超过四行的话就不需要这个按钮并显示所有内容,这样一个需求。

首先,一般此类的描述性文字都时后端返回数据,那么就需要使用Vue 中的 nextTick 来监听 DOM 中是数据变化。(这是后面联调时遇到的,改进方法)
然后就是显示的思路了。第一步是要展示前面三行,然后根据第一步的行数判断缩进的大小,展示第四行。最后通过背景色的控制让两者看上去是一段文字。






借鉴于 Vue 中文本内容超出规定行数后展开收起的处理

你可能感兴趣的:(文字的展开与收起功能)