用vant和setup语法糖写一个三级折叠面板

好的，以下是使用vant和setup语法糖编写的三级折叠面板的示例代码：

<template>
  <van-collapse v-model="activeNames">
    <van-collapse-item title="一级标题" name="1">
      <van-collapse v-model="activeNames2">
        <van-collapse-item title="二级标题1" name="1-1">
          <van-collapse v-model="activeNames3">
            <van-collapse-item title="三级标题1" name="1-1-1">
              <div>三级标题1内容</div>
            </van-collapse-item>
            <van-collapse-item title="三级标题2" name="1-1-2">
              <div>三级标题2内容</div>
            </van-collapse-item>
          </van-collapse>
        </van-collapse-item>
        <van-collapse-item title="二级标题2" name="1-2">
          <div>二级标题2内容</div>
        </van-collapse-item>
      </van-collapse>
    </van-collapse-item>
    <van-collapse-item title="一级标题2" name="2">
      <div>一级标题2内容</div>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Collapse, CollapseItem } from 'vant';

export default defineComponent({
  components: { Collapse, CollapseItem },
  setup() {
    const activeNames = ref(['1']);
    const activeNames2 = ref(['1-1']);
    const activeNames3 = ref([]);

    return {
      activeNames,
      activeNames2,
      activeNames3,
    };
  },
});
</script>

以上代码中，我们使用了Vant UI库中的Collapse和CollapseItem组件来实现折叠面板的效果。在setup函数中，我们使用了Vue 3中的ref函数来创建了三个响应式数据activeNames、activeNames2和activeNames3，分别用于控制一级、二级、三级折叠面板的展开状态。通过在组件中绑定这些数据，我们就能够实现三级折叠面板的效果了。