【JavaScript】内容的展开/收起_原生js实现展开收起-CSDN博客

本文链接：https://blog.csdn.net/Jessieeeeeee/article/details/126644552

内容的展开/收起

样式

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

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

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

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)
    }
  }
}