vue+css3下拉列表展开

 

 

<template>
  <div>
    <h2 class="record-title">中奖记录</h2>
    <div>
      <div v-for="(item, index) in arr" :key="index" class="record-item">
        <div class="record-item-field">
          <div :class="{'active': item.isDrop}" class="record-content">
            <div class="record-time">
              <div class="record-time-item">2019-08-15</div>
              <div class="record-time-item">20:35:26</div>
            </div>
            <div class="record-prize">
              <div class="record-prize-item">一等奖</div>
              <div class="record-prize-item">新秀丽行李箱新秀丽行李</div>
            </div>
            <button type="button" @click="obtain(item, index)" class="record-button">
              {{ item.canDrop ? '领取说明' : '马上领取' }}
              <i v-if="item.canDrop" :class="{'active':item.isDrop}" class="triangle"></i>
            </button>
          </div>
        </div>
        <div ref="recordRemark" class="record-item-remark">
          <p ref="recordRemarkChild">{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecordList',
  data() {
    return {
      isDrop: false,
      arr: [{
        isDrop: false,
        time: 0,
        content: '奖品已发放到您的人保会员账',
        canDrop: false
      }, {
        isDrop: false,
        time: 1,
        content: '奖品已发放到您的人保会员账号，请到【广东人保财险】微信公众号-我的人保-个人中信-卡券/我的卡券中查收使用。',
        canDrop: true
      }, {
        isDrop: false,
        time: 2,
        content: '奖品已发放到您的人保会员账',
        canDrop: true
      }]
    }
  },
  methods: {
    obtain(item, index) {
      if(item.canDrop) {
        item.isDrop = !item.isDrop
        let childHeight = this.$refs.recordRemarkChild[index].offsetHeight
        let height = item.isDrop ? childHeight : 0
        this.$refs.recordRemark[index].style.height = height + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .record-title {
    height: px2rem(88px);
    border-bottom: 1px solid #e4e4e4;
    @include font-dpr(32px);
    color: #333;
    font-weight: 600;
    text-align: center;
    @include lh-dpr(88px);
  }
  .record-item-field {
    padding-left: px2rem(24px);
    .record-content {
      height: px2rem(140px);
      padding-left: px2rem(6px);
      padding-right: px2rem(30px);
      border-bottom: 1px solid #e4e4e4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.active {
        border-bottom-color: transparent;
      }
    }
  }
  .record-time {
    width: px2rem(204px);
    &-item {
      color: #aaa;
      font-weight: 600;
      @include font-dpr(22px);
      @include lh-dpr(22px);
      &:first-child {
        margin-bottom: px2rem(20px);
      }
    }
  }
  .record-prize-item {
    width: px2rem(326px);
    padding-right: px2rem(6px);
    color: #333;
    font-weight: 600;
    @include font-dpr(28px);
    @include lh-dpr(28px);
    @extend %ellipsis;
    &:first-child {
      margin-bottom: px2rem(20px);
    }
  }
  .record-button {
    padding: px2rem(8px) 0;
    width: px2rem(160px);
    background: #E90832;
    border-radius: 25px;
    border: none;
    color: #fff;
    white-space: nowrap;
    @include font-dpr(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    .triangle {
      margin-left: px2rem(4px);
      @include triangle($direction:top, $size:4px, $borderColor:#fff);
      transform: rotate(180deg);
      transition: transform .3s;
      &.active {
        transform: rotate(0);
      }
    }
  }
  .record-item-remark {
    height: 0;
    overflow: hidden;
    transition: height .35s;
    background: #FFF4F4;
    p {
      padding: px2rem(33px) px2rem(30px);
      color: #666;
      @include font-dpr(26px);
      @include lh-dpr(37px);
    }
  }
</style>