vue实现列表文字太长显示展开收起

川长思鸟来 2023-05-22 10:21 85阅读 0赞

![在这里插入图片描述][20200417114807171.gif_pic_center]

<div class="content" v-for="(item, index) in evaluate" :key="index" >
                <div class="photo">
                  <img src="@/assets/15Qrg.png" alt="">
                </div>
                <div class="eval_content">
                  <div class="info">
                    <div class="info_top">
                      <span>{
       {item.from_name}}</span>
                      <span>{
       {item.create_time}}</span>
                    </div>
                    <van-rate :value="item.score" readonly />
                  </div>
                  <div>
                    <p class="desc" :class="{active: item.isShowMore}">{
       {item.content}}<span class="isShow" v-if="item.isDescStatus" @click="item.isShowMore = !item.isShowMore">
                      {
       {item.isShowMore ? '展开' : '收起'}}
                    </span></p>
                  </div>
                  <ul>
                    <li>
                      <img src="@/assets/15Qrg.png" alt="">
                    </li>
                    <li>
                      <img src="@/assets/15Qrg.png" alt="">
                    </li>
                    <li>
                      <img src="@/assets/15Qrg.png" alt="">
                    </li>
                  </ul>
                </div>
              </div>

data.evaluate.list.map((item, index) => { 
       if (item.content.length > 65) { 
         item.isShowMore = true;
         item.isDescStatus = true;
       } else { 
         item.isShowMore = false;
         item.isDescStatus = false;
       }
       if (index === 0 || index === 1) { 
         arr.push(item)
       }
     })
     this.evaluate = [...arr];

.evaluate { 
              background-color: #fff;
              border-radius: rem(10) rem(10) 0px 0px;
              margin: rem(30) rem(25); .title { 
                font-size: rem(36);
                color: #2D2D2D;
                font-weight:500;
                padding: rem(50) 0 0 rem(39);
              }
              .content { 
                display: flex;
                margin: rem(35) rem(38) 0;
                padding-bottom: rem(35);
                border-bottom: 1px solid #E4E4E4; .photo { 
                  width: rem(86);
                  height: rem(86);
                  border-radius: 50%;
                  overflow: hidden;
                  background-color: #ccc; img { 
                    width: 100%;
                    height: 100%;
                  }
                }
                .eval_content { 
                  flex: 1;
                  margin-left: rem(27); .info { 
                    .info_top { 
                      display: flex;
                      margin-bottom: rem(15); span:nth-child(1) { 
                        font-weight:400;
                        font-size: rem(36);
                        color: #222;
                      }
                      span:nth-child(2) { 
                        flex: 1;
                        text-align: right;
                        color: #888;
                        font-weight:400;
                        font-size: rem(20);
                        line-height: rem(50);
                      }
                    }
                  }
                  .desc { 
                    font-size: rem(24);
                    color: #444;
                    line-height: rem(38);
                    font-weight:400;
                    margin: rem(38) 0 rem(29) 0;
                    position: relative; .isShow { 
                      position: absolute;
                      bottom: 0;
                      right: rem(8);
                      color: #FF4600;
                      font-size: rem(20);
                      background: #fff;
                      padding-left: rem(30);
                    }
                  }
                  .active { 
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                  }
                  ul { 
                    display: flex;
                    flex-wrap: wrap; li { 
                      width: 30%;
                      height: rem(154);
                      margin-right: rem(16);
                      margin-bottom: rem(16); img { 
                        width: 100%;
                        height: 100%;
                      }
                    }
                    li:nth-last-child(1) { 
                      margin-right: 0;
                    }
                  }
                }
              }
              .content:nth-child(3) { 
                border-bottom: none;
              }
              .more { 
                height: rem(80);
                line-height: rem(80);
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center; span { 
                  color: #FF4600;
                  font-weight:400;
                  font-size: rem(24);
                  margin-right: rem(20);
                }
                img { 
                  width: rem(8);
                  height: rem(16);
                }
              }
            }

[20200417114807171.gif_pic_center]: /images/20230521/64d9bdae06bf4f3382fb48d5e1370feb.png