JavaScript内容的展开/收起

Posted 2022-11-26 嘻嘻的妙妙屋

内容的展开/收起

样式

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

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

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

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.showMore
      console.log('showMore', this.showMore)
    
  

---

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