【JavaScript】内容的展开/收起

内容的展开/收起

样式

数据超过两行则用省略号代替，并且显示“展开”：

点击“展开”，显示全部数据，并且显示“收起”：

数据不超过两行则不显示“展开/收起”；

index.vue

<div class="head headTitle">参与房管厅<span class="highlight">({{detail && detail.contentList.length}})</span>：</div>
<div :class="!showMore ? 'contentList' : 'contentShow'" ref="contentList-container" ><span class="contentName" v-for="(item, index) in (detail ? detail.contentList : [])" :key="index">{{item.name}}；</span>
</div>
<div class="showMore" v-if="tooMany" @click="expand"><div class="highlight">{{!showMore ? '展开' : '收起'}}<div :class="!showMore ? 'icon_more' : 'icon_less'"></div></div>
</div>

index.scss

.head {width: 118px;text-align: left;
}
.headTitle {color: rgba($color: #1C1F23, $alpha: 0.6);font-size: 14px;font-weight: 600;
}
.contentList {max-width: 774px;max-height: 42px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;.contentName {line-height: 21px;}
}
.contentShow {max-width: 774px;min-height: 42px;.contentName {line-height: 21px;}
}
.showMore {width: 44px;margin-left: 8px;cursor: pointer;position: relative;.highlight {position: absolute;bottom: 0;font-weight: 400;color: #FFB200;display: flex;.icon_more {display: inline-block;vertical-align: text-top;width: 16px;height: 16px;background-image: url('~@/img/iconNew/icon_more.svg');}.icon_less {display: inline-block;vertical-align: text-top;width: 16px;height: 16px;transform: rotate(180deg);background-image: url('~@/img/iconNew/icon_more.svg');}}
}

index.js

import { mapState, mapActions } from 'vuex'
import { formatNum } from '@/common/utils'export default {name: 'detail',data () {return {id: 0,tooMany: false,showMore: false}},watch: {$route () {if (this.id !== this.$route.query.id) {this.id = this.$route.query.id}}},computed: {...mapState('page', ['detail'])},async mounted () {if (this.id !== this.$route.query.id) {this.id = this.$route.query.id}await this.getDetailInfo(this.id)this.handleShowMore()},methods: {formatNum,...mapActions('hallWar', ['getDetailInfo']),handleShowMore () {const item = this.$refs["tingList-container"]this.observer = new ResizeObserver(() => {console.log('watch observer') // 监听触发方法if (item.scrollHeight > 42) {console.log('itemmmm', item.clientHeight)this.tooMany = true}});this.observer.observe(item) // 监听元素},expand () {this.showMore = !this.showMoreconsole.log('showMore', this.showMore)}}
}

参考文献：
一个较新的JavaScript API——ResizeObserver 的使用

【JavaScript】内容的展开/收起相关推荐

html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例
感兴趣javascript实现文字隐藏.展开收起的简单示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. function init(){ var len = 14; //默认显示字数 ...
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
最近写了一个筛选功能,要使用手风琴效果展开内容,但是高度不固定,故此添加的动画效果失效,对此有两种解决方案动画失效的原理是: 如果当前设置动画的元素他的父元素高度为auto的时候,且当前元素未设置p ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
收起展开循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
android从一点展开动画,Android自定义View——从零开始实现可展开收起的水平菜单栏...
大家要是看到有错误的地方或者有啥好的建议,欢迎留言评论前言:最近项目里要实现一个可展开收起的水平菜单栏控件,刚接到需求时想着用自定义View自己来绘制,发现要实现圆角.阴影.菜单滑动等效果非常复 ...
微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处. 一.效果图默认为展开状态 --- 左:展开:右:收起二.代码片段: 1.wxml部分 <view c ...
react 展开收起写法（手动展开收起和自动展开收起）
一:手动展开收起 html写法: <div className="pack-unfold">{isShow.includes(item.chapterId)?<s ...
vue中实现文字超过2行... 展开-收起(兼容ie)
先看看实际效果 2.需求一步一步分析当文字超出省略号就想到css样式实现(ie不兼容) overflow: hidden; text-overflow: ellipsis;display: -we ...

【JavaScript】内容的展开/收起

内容的展开/收起

样式

index.vue

index.scss

index.js

【JavaScript】内容的展开/收起相关推荐

最新文章

热门文章