gdy_app_8/src/components/collapse/index.vue

<template>
  <div class="collspseBox">
    <van-row class="collspse_item" v-for="(item, index) in  ruleTree" :key="item.id" >
      <van-col class="icon" span="2"  @click.stop="open(item, index)">
        <van-icon v-if="item.child && item.child.length > 0" size="16" :name="item.active ? 'arrow-down' : 'arrow'" />
      </van-col>
      <van-col span="22" class="title" :class="currentRuleId == item.id ? 'item-active' : 'item-gray'"  @click.stop="open(item, index)">
        <label style="display: flex; align-items: center;">
          <input class="radio_button" type="radio" :checked="currentRuleId == item.id" :value="item.id" name="treeGroup" @change="handleChange(item)">
          {{ item.name }}
        </label>
      </van-col>

      <van-col span="24" class="content" v-if="item.child && item.child.length > 0" :style="{ height: item.active ? 'auto' : '0' }">
        <collapse :currentRuleId="currentRuleId" :ruleTree="item.child" @open="$emit('open', $event)" />
      </van-col>
    </van-row>
  </div>
</template>

<!--  -->

<script>
  export default {
    name: "collapse",
    props: {
      ruleTree: Array,
      currentRuleId: {
        type: [String, Number],
        default: 0
      },
    },

    data() {
      return {
        selectId: 0,
      }
    },

    methods: {
      handleChange(item) {
        this.$emit("open", item);
      },
      open(item, index) {
        this.$set(this.ruleTree[index], 'active', !this.ruleTree[index].active);
      },


    }
  }
</script>

<style lang="scss" scoped>
  .item-active {
    color: #409EFF !important;
  }
  .item-gray {
    color: #323233 !important;
  }

.collspseBox {
  padding: 14px 10px;

  .collspse_item {
    background-color: #fff;
    padding: 15px 12px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0px 6px rgba(100, 101, 102, 0.1);

    .icon {
      text-align: center;
      vertical-align: middle;
      color: #d2d2d2;
    }

    .title {
      font-size: 0.32rem;
      color: #323233;
      display: flex;
      align-items: center;
      white-space: nowrap;
      text-wrap: nowrap;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 单选框样式 */
      .radio_button {
        -webkit-appearance: none; /* 移除默认样式 */
        appearance: none; /* 移除默认样式 */
        outline: none; /* 移除轮廓 */
        display: inline-block;
        width: 0.3rem; /* 设置宽度 */
        height: 0.3rem; /* 设置高度 */
        border-radius: 50%; /* 设置为圆形 */
        background-color: white; /* 初始背景颜色为白色 */
        position: relative; /* 设置相对定位 */
        margin: 0 8px 0 0; /* 设置边距 */
        border: 1px solid #d2d2d2;
        cursor: pointer; /* 设置鼠标指针为手型 */
      }

      .radio_button:checked {
        width: 0.3rem; /* 设置宽度 */
        height: 0.3rem; /* 设置高度 */
        background-color: #409EFF; /* 选中时中心白色 */
        border: none; /* 选中时去掉边框 */
        z-index: 2; /* 确保在最上面 */
      }

      .radio_button:checked::before {
        content: "";
        position: absolute;
        top: 50%; /* 使伪元素垂直居中 */
        left: 50%; /* 使伪元素水平居中 */
        transform: translate(-50%, -50%); /* 使伪元素水平垂直居中 */
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%; /* 使伪元素变成圆形 */
        background-color: #ffffff; /* 外部红色 */
        z-index: 1; /* 确保伪元素在最前面 */
      }
    }

    .content {
      transition: all .5s;

      .collspseBox {
        padding: 0;

        .collspse_item {
          padding: 16px 0 0 12px;
          margin-bottom: 0;
          box-shadow: none;

          .title {
            display: flex;
            align-items: center;
            font-size: 0.3rem;
            color: #2F3541;
            font-family: "PingFang SC";
            font-weight: 400;
            position: relative;
            padding-left: 5px;
          }


        }
      }
    }
  }

}

</style>