1.单个展开收起

1.实现功能如下图：

2.代码

1.html代码

<div class="top"><span:style="{ 'max-height': textOpenFlag ? textHeight : '' }":class="{ unfoldText: textOpenFlag }"class="titleText"ref="textContainer">调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表</span><spanv-if="showBtnFlag"@click="textOpenFlag = !textOpenFlag"class="btn">{{ textOpenFlag ? "展开" : "收起" }}</span>
</div>

js 代码

data () {return {textHeight: '',  // 想要显示的高度textOpenFlag: false,  // 展开/收起 判定showBtnFlag: false,  // 是否显示展开收起}
},
mounted() {this.$nextTick(() => {setTimeout(() => {this.showAllText ();}, 300);});
},
methods: {showAllText () {// 默认展示两行数据的高度，20是一行的高度可以自定义 *2 表示展示两行 如果想要显示n行就*nlet twoHeight = 20 * 2;this.textHeight = `${twoHeight}px`;let curHeight = this.$refs.textContainer.offsetHeight;if (curHeight > twoHeight) {this.textOpenFlag = true;this.showBtnFlag = true;} else {this.textOpenFlag = false;this.showBtnFlag = false;}}
}

css代码

.top{font-size: 14px;color: #333333;position: relative;.hiddenText {overflow: hidden;display: block;}.hiddenText:after {z-index: 3;content: "...";position: absolute;bottom: 2px;right: 55px;width: 14px;padding-left: 15px;background: linear-gradient(to right, rgba(255, 255, 255, 0.1), #fff 45%);}.btnMore{color: #34B7B9;position: absolute;right: 0;bottom: 0;background-color: #fff;}
}

2.多个情况展示

html代码

<div class="more" v-for="(item, index) in moreList" :key="item.index"><div class="top"><span:style="{'max-height': item.textOpenFlag ? textHeight : ''}":class="{hiddenText: item.textOpenFlag}"class="textMore"ref="textContainer">{{moreListName[index].join('、')}}</span><spanv-if="item.textOpenFlag !== null"@click="item.textOpenFlag = !item.textOpenFlag"class="btnMore">{{item.textOpenFlag ? '【展开】':'【收起】'}}</span></div><div class="bottom"><div class="time"><span>{{moment(item.paidAt * 1000).format('YYYY-MM-DD hh:mm')}}</span><span>￥{{item.price}}</span></div><div class="app">仅支持在APP中测试</div></div></div>

js 代码

data () {return {moreList: [],   // 数据数组textHeight: '',  // 想要显示的高度textOpenFlag: false,  // 展开/收起 判定showBtnFlag: false,  // 是否显示展开收起}
},
mounted() {this.getTableList()  // 调用后端获取数据
},
methods: {async getTableList () {const res = await getIndividual({ page: -1, pageSize: 10 })this.moreList = res.data.records   //后端获取数据赋值给数组this.moreList.forEach((ele, index) => {this.$set(  // 给获取到的数组数据  添加属性来判定 展示/收起this.moreList,index,Object.assign({}, ele, { textOpenFlag: null }))})this.$nextTick(() => {this.showTextAll()})},showTextAll () {// 默认展示两行数据的高度，20是一行的高度可以自定义 *2 表示展示两行 如果想要显示n行就*nconst twoHeight = 20 * 2this.textHeight = `${twoHeight}px`const txtDom = this.$refs.textContainerfor (let i = 0; i < txtDom.length; i++) {const curHeight = txtDom[i].offsetHeightif (curHeight > twoHeight) {this.$set(this.moreList,i,Object.assign({}, this.moreList[i], { textOpenFlag: true }))} else {this.$set(this.moreList,i,                              // 如果高度够的话就为null 不显示展示/收起按钮Object.assign({}, this.moreList[i], { textOpenFlag: null })  )}}}
}

css代码和单个情况的css样式一样，如上所示不需要改动

【vue】实现超过两行或多行显示展开收起 (单个展开收起和数组多个展开收起)相关推荐

css 单行、两行或多行显示不下省略号...表示实现
单行:限制文字一行显示不下时,用省略号'...'表示方法一: .test { /* 溢出隐藏 */ overflow: hidden; /* 限制一行显示 */ white-space: nowr ...
CSS文本设置超出2行显示省略号
需求如图所示,当居住地址字段太长超过2行时就显示 (-) 1.强制一行so easy <div class="line style">内容部分内容部分内容 </ ...
CSS文本超过两行用省略号代替(兼容所有浏览器)
CSS文本超过两行用省略号代替方法一:常规写法(只兼容Chrome内核浏览器) 方法二:可以兼容所有浏览器的方式( js + CSS实现 ) 方法三:可以兼容所有浏览器的方式( 纯CSS实现 ) 方 ...
div中同时存在文本和数字超过两行出省略号
div中同时存在文本和数字超过两行出省略号设置文本超过两行出省略号出现下面问题,未到指定宽度就换行 width: 255px;overflow: hidden;text-overflow: elli ...
Button按钮多行显示的实现方法
一.VB中Button按钮多行显示的实现方法先在记事本等文本文件中写上两行或多行文字,然后复制到Button按钮的Caption属性中即可. 二.C#中Button按钮多行显示的实现方法使用上面的 ...
JS控制文字只显示两行，超出部分显示省略号
JS控制文字只显示两行,超出部分显示省略号由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jq ...
表格内容单/多行展示（一）- 单行/多行显示的方法
分析单行/多行显示涉及到 table-layout: fixed; 这个属性,默认状态下的属性值是 auto (自动表格布局),两种不同的属性值区别如下: 方法我在设置表格内容单行/多行显示时采用 ...
TextView的居中显示、多行显示、单行显示且显示不完用省略号替代...
一,居中显示 Textview增加以下属性就可以了 android:gravity="center" // 内容居中 android:text="hello world! ...
解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...

【vue】实现超过两行或多行显示展开收起 (单个展开收起和数组多个展开收起)

1.单个展开收起

1.实现功能如下图：

2.代码

2.多个情况展示

【vue】实现超过两行或多行显示展开收起 (单个展开收起和数组多个展开收起)相关推荐

最新文章

热门文章