vue组件（CSS） --- 展开收起

点击查看代码

<template>
  <div class="wrapper">
    <input :id="id" class="exp" type="checkbox" />
    <div class="text" :class="bgFlag == 'bgColor' ? 'text2' : ''">
      <label class="btn" :for="id"><span class="btnBox"></span></label>
      {{ mainPoint }}
      <!-- <label class="btnBox"><label class="btn" :for="id"></label></label> -->
    </div>
  </div>
</template>

<script lang="ts">
  let index = 0;
  export default {
    props: {
      mainPoint: {
        type: String,
        default: '',
      },

      bgFlag: {
        type: String,
        default: '',
      },
    },
    data(): { id: string } {
      return { id: `${index}mainPoint` };
    },
    created() {
      index++;
      // console.log(index);
    },

    methods: {
      fullClose(n, m) {
        let result = Math.random() * (m + 1 - n) + n;
        while (result > m) {
          result = Math.random() * (m + 1 - n) + n;
        }
        return result;
      },
    },
  };
</script>

<style lang="less" scoped>
  .wrapper {
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 16px;
    width: 100%;
  }
  .text {
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    /* display: flex; */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    position: relative;
    white-space: pre-wrap;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    width: 100%;
  }
  .text::before {
    content: '';
    height: calc(100% - 24px);
    float: right;
  }
  .text::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
  }

  .text2::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #f7fbff;
    margin-left: -100px;
  }
  .btn {
    clear: both;
    float: right;
    margin-left: 10px;
    font-size: 16px;
    padding: 0 8px;
    line-height: 24px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }
  .btn::before {
    content: '展开全部';
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
  }

  .btnBox {
    float: right;
    clear: both;
    text-align: left;
  }
  .btnBox::before {
    content: '';
    display: block;
    // 定义元素位置
    margin-top: 6px;
    margin-left: 5px;
    // 定义元素宽高
    width: 10px;
    height: 10px;
    // background-image无法引用本地资源，故需要用网络地址
    background-image: url(../../../../assets/images/downjt.png);
    background-size: 100% 100%;
  }
  .exp {
    display: none;
  }
  .exp:checked + .text {
    -webkit-line-clamp: 999;
  }
  .exp:checked + .text::after {
    visibility: hidden;
  }
  .exp:checked + .text .btn::before {
    content: '收起';
  }

  .exp:checked + .text .btnBox::before {
    content: '';
    display: block;
    // 定义元素位置
    margin-top: 6px;
    margin-left: 5px;
    // 定义元素宽高
    width: 10px;
    height: 10px;
    // background-image无法引用本地资源，故需要用网络地址
    background-image: url(../../../../assets/images/upjt.png);
    background-size: 100% 100%;
  }
</style>