vue 文本超出隐藏 展开收起
vue 文本超出隐藏 展开收起首先在需要设置超出隐藏的内容块写一个固定高度,超出设置隐藏<div//class="checkboxHeight"// overflow:hidden;这里可以写文本样式超出几行... 显示:style="{height:showMore?'auto':showHeight+'px'}"><p ref="ref">文本</p><
·
vue 文本超出隐藏 展开收起
首先在需要设置超出隐藏的内容块写一个固定高度,超出设置隐藏
<div
//class="checkboxHeight"// overflow:hidden;这里可以写文本样式超出几行... 显示
:style="{height:showMore?'auto':showHeight+'px'}"
>
<p ref="ref">文本</p>
</div>
<a-button
type="link"
v-show="isLongContent"
style="float:right;"
@click.stop="showMore2"
>
{{showMore?'收起':'展开'}}
<a-icon v-if="!showMore" type="down" />
<a-icon v-else type="up" />
</a-button>
showMore:false
showHeight: 20//文本默认高度
isLongContent: false//展开收起按钮默认不显示
this.$nextTick(() => {
//const contentHeightThreshold = 20;
let contentHeight = this.$refs.checkbox[3].$el.clientHeight;
if (contentHeight > showHeight) {
this.showHeight = showHeight;
this.isLongContent = true;
} else {
this.isLongContent = false;
}
});
个人vuepress搭建博客链接
在dom加载完成后通过ref获取 div 的真实高度clientHeight
更多推荐
已为社区贡献1条内容
所有评论(0)