vue实现超过两行显示展开收起的代码
作者：前端华仔
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue超过两行显示展开收起
基于vue-cli2，sass，vant（ui组件）：https://youzan.github.io/vant/#/zh-CN/home
具体代码如下：
<template>
<div>
<div class="group">
<div class="text more" ref="more">
占位
</div>
<div class="list" v-for="(item, index) in historyList" :key="index">
<van-row>
<van-col span="12">{{ item.version }}</van-col>
<van-col class="t_right l_text" span="12">{{ item.time }}</van-col>
</van-row>
<div class="l_title">{{ item.title }}</div>
<div
class="text"
ref="textContainer"
:class="{ retract: item.status }"
:style="{ 'max-height': item.status ? textHeight : '' }"
>
{{ item.content }}
</div>
<span
v-if="item.status !== null"
class="link"
@click="more(index)"
>{{ item.status ? "展开" : "收起" }}</span
>
</div>
</div>
</div>
</template><script>
export default {
data () {
return {
textHeight: '',
historyList: [
{
version: '7.1.4',
title: '本次更新',
content:
'-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐',
time: '2周前'
},
{
version: '7.1.4',
title: '本次更新',
content:
'-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐',
time: '5周前'
},
{
version: '7.1.4',
title: '本次更新',
content:
'-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐',
time: '6周前'
},
{
version: '7.1.4',
title: '本次更新',
content:
'-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐',
time: '9周前'
}
]
}
},
mounted () {
this.historyList.forEach((ele, index) => {
this.$set(
this.historyList,
index,
Object.assign({}, ele, { status: null })
)
})
// DOM 加载完执行
this.$nextTick(() => {
this.calculateText()
//console.log(this.historyList)
})
window.onresize = () => {
this.historyList.forEach((ele, index) => {
this.$set(
this.historyList,
index,
Object.assign({}, ele, { status: null })
)
})
setTimeout(() => {
this.calculateText()
}, 0)
}
},
methods: {
// 计算文字 显示展开 收起
calculateText () {
// 获取一行文字的height 计算当前文字比较列表文字
let oneHeight = this.$refs.more.scrollHeight
let twoHeight = oneHeight * 2 || 40
this.textHeight = `${twoHeight}px`
let txtDom = this.$refs.textContainer
for (let i = 0; i < txtDom.length; i++) {
let curHeight = txtDom[i].offsetHeight
if (curHeight > twoHeight) {
this.$set(
this.historyList,
i,
Object.assign({}, this.historyList[i], { status: true })
)
} else {
this.$set(
this.historyList,
i,
Object.assign({}, this.historyList[i], { status: null })
)
}
}
},
more (index) {
this.historyList[index].status = !this.historyList[index].status
}
}
}
</script><style lang="scss" scoped>
.group {
.list {
padding: 5px 0;
border-bottom: 1px solid #eaeaea;
}
.text {
position: relative;
color: #000;
font-size: 14px;
}
.more {
visibility: hidden;
}
.link {
font-size: 12px;
color: #2d95fe;
}
.retract {
position: relative;
overflow: hidden;
}
.retract:after {
content: "...";
position: absolute;
bottom: 0;
right: 2px;
width: 25px;
padding-left: 25px;
background: linear-gradient(to right, transparent, #fff 45%);
}
}
</style>vue多个展开收起功能
需求场景：移动端/h5/公众号页面，有很多分类，每个分类下展示图片，默认超出两张 出现展开和收起功能。
说下思路
这类功能很常见，其实之前也写过；正常思路都是搞个类似单独的变量去控制分类下图片是展开/收起；但是代码很是累赘，于是就想说能不能用原生的代码去写。
接口返回的数据格式大致如下：
list =
[
{
title: '标题一',
id：'1',
imgList:[
'img1','img2',...
]
},
{
title: '标题一',
id：'2',
imgList:[
'img1','img2',...
]
},
]
尝试
1.HTML上生成特定的class
使用接口的id，生成特定的类，这样在控制和找DOM就会更方便
代码里是分类下，图片超出4张才会出现展开/收起按钮
默认不展示收起按钮
<div v-for="item in list">
<div>标题：{{item.title}}</div>
<div :class="`main${item.id}`">
<img v-for="(url,index) in item.imgList.slice(0,4)" :src="url">
</div>
//被控制 展开/收起的图片
<div :class="`main${item.id}`">
<img v-for="(url,index) in item.imgList.slice(4,)" :src="url">
</div>
<div v-if="item.imgList.length>4">
<div :class="`open${item.id}`" @click="toChange(item,'block')">展开</div>
<div :class="`close${item.id}`" @click="toChange(item,'none')" style="display:none;">收起</div>
</div>
</div>
2.控制展开/收起
分别获取到 mainDom，openDom ，closeDom
下面通过类名获取到的是DOM数组，DOM数组不能用forEach遍历，所以要转一下
// 展开/收起
toChange(item,str){
let mainDom = document.getElementsByClassName(`nr${item.id}`);
let openDom = document.getElementById(`open${item.id}`);
let closeDom = document.getElementById(`close${item.id}`);
mainDom = [...mainDom];
mainDom.forEach(item=>{
item.style.display = str;
})
closeDom.style.display = str;
openDom.style.display = str==='block' ? 'none':'block';
},
以上就是今天要讲的内容，本文仅仅简单介绍了平常工作中常见的需求，同一种需求不同状态下写，代码也会不一样，写文章也是为了更好的总结，从中慢慢积累经验。希望能给大家一个参考，也希望大家多多支持脚本之家。