vue 文本超出隐藏 展开收起

vue 文本超出隐藏 展开收起

首先在需要设置超出隐藏的内容块写一个固定高度，超出设置隐藏

	<div		//class="checkboxHeight"// overflow:hidden;这里可以写文本样式超出几行... 显示:style="{height:showMore?'auto':showHeight+'px'}"><p ref="ref">文本</p></div> <a-buttontype="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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！