vue3原生下拉

<template>
  <div class="demo-collapse">
    <div class="box">
      <div
        class="title-list"
        v-for="(item, index) in collapseLists"
        :key="index"
      >
        <div class="title-wrap" @click="isOpen(index)">
          <span class="title">{{ item.title }}</span>
          <ArrowDownBold class="icon" />
        </div>
        <div :class="item.Flag ? 'content active' : 'content'">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
// 引入icon
import { ArrowDownBold } from "@element-plus/icons-vue";
// 定义是否展开的变量
const openFlag = ref<boolean>(false);
// 数据
const collapseLists = reactive([
  {
    title: "数据安全法",
    content:
      "（对您的数据进行安全评估）专业法律专家针对《中华人民共和国数据安全法》法律条款深度解读，提供基于国家立法背景下对各行业组织机构数据发展战略、安全合规路线的专业咨询建议。",
    Flag: false,
  },
  {
    title: "个人信息保护法",
    content:
      "（保护个人信息权益）专业法律专家针对《中华人民共和国个人信息保护法》法律条款深度解读，基于国家立法背景，为广大民众提高对个人信息合法权益保护的认知、各行业涉及个人信息处理服务的组织机构提升其合规度、专业度提供专业咨询建议。",
    Flag: false,
  },
  {
    title: "App合规检测",
    content:
      "（App、软件产品隐私数据合规性自动化检测服务。）App安全合规检测服务，是全面检测移动应用中存在的不合规项，包含App 收集使用个人信息行为、个人信息存储方式、第三方SDK行为分析、App 运营者对用户权益保障、等其他违规违法进行评测。深度挖掘APP隐私合规风险源头。",
    Flag: false,
  },
  {
    title: "企业风险管理",
    content:
      "（最小的成本收获最大的安全保障）风险管理是社会组织或者个人用以降低风险的消极结果的决策过程，通过风险识别、风险估测、风险评价，并在此基础上选择与优化组合各种风险管理技术，对风险实施有效控制和妥善处理风险所致损失的后果，从而以最小的成本收获最大的安全保障。",
    Flag: false,
  },
  {
    title: "数据资产管理合规检测",
    content:
      "（评估企业数据资产管理合规性）依据《中华人民共和国数据安全法》第二十一条，评估企业数据资产管理规范化水平，数据资产分类分级程度，生成数据资产管理合规报表，让管理人员实时了解公司数据资产管理合规现状。",
    Flag: false,
  },
  {
    title: "GDPR",
    content:
      "（GDPR是当今生效的最强有力的全球隐私法。）由欧盟创建，用于规范组织如何收集、处理和保护欧盟居民的个人数据。它旨在通过让数据主体控制其个人数据的获取、使用和共享的方式来加强隐私权。GDPR确定了严格的隐私保护标准，要求企业对个人数据存储、传输、访问方式以及审计进行更大力度地监督。",
    Flag: false,
  },
]);
const isOpen = (index: number) => {
  if (collapseLists[index].Flag) {
    collapseLists[index].Flag = false;
  } else {
    collapseLists.forEach((item) => {
      item.Flag = false;
    });
    collapseLists[index].Flag = true;
  }
};
</script>
<style lang="less" scoped>
.demo-collapse {
  .box {
    margin: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    .title-list {
      width: 300px;
      .title-wrap {
        border-bottom: 1px solid #ccc;

        .title {
          font-size: 20px;
          height: 25px;
          line-height: 25px;
        }
        .icon {
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin-top: -5px;
        }
      }
      .content {
        width: 600px;
        overflow-y: hidden;
        max-height: 0;
        text-align: left;
        // transition: all 0.3s;
      }
      .content.active {
        border-bottom: 1px solid #ccc;
        overflow-y: hidden;
        max-height: 500px;
        transition: all 1s;
      }
    }
    .title-list:nth-child(2n) {
      .content {
        position: relative;
        left: -300px;
      }
    }
  }
}
</style>