vue项目中判断文字内容超出n行显示详情按钮
两行文本溢出显示省略号的同时,还要添加一个详情按钮点击查看全部的内容,如下图:
html内容:
<Row class="lh-64-r mb-20-r"> <div class="d-i-b-v w-calc-240-r lh-32-r"> <p class="two-line" ref="detailDom">{{ prjDetail || "-" }}</p> </div> <a v-if="showDetailBtn" class="d-i-b-b lh-32-r more-btn-unit fw-bold" @click="">详情</a> </Row>
参数:
data() { return { prjDetail: “”, // 详情 showDetailBtn: false, // 是否显示“详情”按钮 detailDom: "", // 详情dom } },
初始化及监听:
mounted() { // 判断详情是否溢出 this.detailDom = this.$refs.detailDom; this.showDetailBtnFun(); window.addEventListener('resize', this.showDetailBtnFun); },
判断文本是否溢出方法:
/** * 判断文本是否溢出 * 特殊:如果文字长度刚好达到某个临界值,会出现不及时刷新出现按钮的情况,解决方案:使用this.$nextTick强制刷新 */ showDetailBtnFun() { this.$nextTick(()=>{ this.detailDom = this.$refs.detailDom; this.showDetailBtn = this.detailDom.clientHeight < this.detailDom.scrollHeight; }) },
在请求数据接口后,调用this.showDetailBtnFun();即可刷新是否显示详情按钮
前端菜鸟一枚,习惯记录平时遇到的一些问题和学习笔记,觉得有用的可以点个支持!有问题的也可以加QQ814878176交流哟 : )