vue2.0+ts 循环div，单独点击展开收起（简单model）

最新推荐文章于 2024-02-18 09:53:20 发布

造梦者FZ

最新推荐文章于 2024-02-18 09:53:20 发布

阅读量708

点赞数 2

分类专栏： vue 文章标签： html css javascript typescript elementui

本文链接：https://blog.csdn.net/qq_43923146/article/details/120021073

版权

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

vue2.0+ts 循环div，单独点击展开收起（简单model）

在这里插入图片描述

<template>
  <div class="bigBox">
    <div class="box" v-for="(item,index) in List" :key="index">
      <p @click="showOpinion(item)">{{item.code}}</p>
      <p class="name" :id="'name'+item.code">{{item.name}}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { ElForm } from "element-ui/types/form";
import { Component, Vue, Ref } from "vue-property-decorator";
@Component({
  components: {},
})
export default class About extends Vue {
  public List: any = [
    {
      name:'aaa',
      code:11
    },
    {
      name:'bbb',
      code:22
    },
    {
      name:'ccc',
      code:33
    },
     {
      name:'ddd',
      code:44
    }
  ];
  public showOpinionHover:Boolean =false
  public showOpinion(row:any){
    // 如果当前点击对象是展开状态
    if(row.showOpinionHover){
      let demo:any = document.getElementById(`name${row.code}`);
      console.log(4455,demo)
      demo.style.height = '0px';
      row.showOpinionHover = false;
      return
    }
    // 每次点击从数据中遍历，将已展开的数据合起来
    for(let item of this.List){
      let obj:any = item;
      let demo:any = document.getElementById(`name${obj.code}`);
      if(obj.showOpinionHover){
        demo.style.height = '0px';
        obj.showOpinionHover = false;
      }
    }
    // 将所点击的对象展开
    row.showOpinionHover = true;
    let demo:any = document.getElementById(`name${row.code}`);
    demo.style.height = '40px';
  }
}
</script>

<style lang="scss">
.bigBox{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.box{
  width: 300px;
  height: 50px;
  border: 1px solid gray;
  background: burlywood;
}
.name{
  width: 300px;
  height: 0px;
  transition: height ease-in .5s;
  background: pink;
  margin-top: 0px;
  overflow: hidden;
  box-shadow: 0px 0px 5px rgb(102 102 102 / 35%);
}
</style>