在许多项目中有一些详情功能,需要用到‘展开’,‘收起’的功能,内容超出规定的行数后开启展示收起的功能效果。
思路: 首先需要判断文本是否超出规定的行数,这些一般都是异步请求渲染到页面上的,可以使用nextTick来监听DOM中的数据变化。然后设置css
这个方法和思路都是简单的一种
核心代码
<template> <div class="wrap"> <div class="content" ref="Resume" :class="{'ellipsis' : textShow}" :style="{'width' : (textShow ? '85%' : '100%')}"> 个人简介:{{data}} <span class="zhan" @click="contentShow()" v-if="textShow == false">收起 <van-icon name="arrow-up" /> </span> </div> <span class="zhan" @click="contentShow()" v-if="textShow">展开 <van-icon name="arrow-down" /> </span> </div> </template> <script> import { Rate, List, Icon } from 'vant' export default { data() { return { data: '这是一段内容这是一段内容这是一段内容这是一段内容', textShow: null // 控制展开和收起 } }, methods: { // 调用这个函数,需要考虑异步请求,当请求成功后才能这个方法才不会出错,在请求成功后,this.$nextTick(() => {this.getHeight()}) // 获取个人简介高度 getHeight() { if (this.infoData.PersonalProfile) { let contentHeight = window.getComputedStyle(this.$refs.Resume).height.replace('px', ''); // 20 是通过一行内容,用getComputedStyle获取到的一行的height if (contentHeight > 20) { // 当当前的高度大于一行的高度的时候 this.textShow = true } } }, } } <style lang="less"> .wrap { display: flex; align-items: center; .content { font-size: 14px; color: #b9b9b9; font-weight: 400; word-break: break-all; } .zhan { font-size: 14px; color: #ed1616; font-weight: 400; } } </style>
2. getComputedStyle()
在实际项目中,可能需要获取元素的css样式属性值,但是getComputedStyle()只能获取通过style设置的元素css属性值。
这时getComputedStyle的方法就得以体现,他可以获取指定元素对应css属性的最终计算值
// element 必须值,要获取样式值的元素对象 // pseudoElt:可选,表示指定节点的伪元素 window.getComputedStyle(element, [pseudoElt])