css 展开与收起

第一种

1、默认展示三行，超过三行隐藏

<div class="titleCont">
   <div class="tempItem">
      <span :class="yxhsExpent ? '' : 'van-multi-show'" v-html="detailList.YXHS"></span>
   </div>
   <div @click="yxhsExpent = !yxhsExpent">
      <van-icon class="expent-iocn" :name="yxhsExpent ? 'arrow-up' : 'arrow-down'" />
   </div>
</div>

2、css样式

.van-multi-show{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

第二种

		<div class="dataBox">
            <div v-for="(item,index) in mangerNumberList" :key="index" class="itemMan">
              <div class="managerLeft">
                <img v-if="item.fund_mgr_sex === '女'"  src="@/assets/images/customer/managerwoMan.svg" alt="">
                <img v-else src="@/assets/images/customer/managerMan.svg" alt="">
                <span v-if="item.fund_mgr_name">{{ item.fund_mgr_name }}</span>
              </div>
              <div class="managerRight">
                <div>
                  <span></span>
                  <span>当前管理产品数量：</span>
                  <span>{{ item.mger_pro_num || '--' }}</span>
                </div>
                <div>
                  <span></span>
                  <span>投资年限：</span>
                  <span>{{ item.tznx || '--' }}</span>
                </div>
                <div>
                  <span></span>
                  <span>当前公司任职时间：</span>
                  <span>{{ item.rzsj || '--' }}</span>
                </div>
              </div>
            </div>
            <span
              v-if="managerList && managerList.length>2"
              type="text"
              class="moreManger"
              @click.stop="seeMore('MANGER')"
            >{{ showmoreManger?"查看更多":'收起' }}</span>
          </div>

computed: {
	mangerNumberList: {
      get: function () {
        if (this.showmoreManger) {
          if (this.managerList && this.managerList.length < 2) {
            return this.managerList;
          }
          const newArr = [];
          if (this.managerList && this.managerList.length > 0) {
            for (var i = 0; i < 2; i++) {
              const item = this.managerList[i];
              newArr.push(item);
            }
          }
          return newArr;
        }
        return this.managerList;
      },
      set: function (val) {
        this.mangerNumberList = val;
      }
    },
}

methods: {
	seeMore() {
      this.showmoreManger = !this.showmoreManger;
    },
}