vant2中collapse 使用教程

Vant 2.x中的Collapse组件是一个轻量级的折叠面板，常用于展示内容列表或者需要隐藏部分内容的情况。以下是使用Vant Collapse的基本步骤：

1. **安装依赖**：
首先，在项目中安装Vant UI库，如果你使用的是Vue.js框架，可以使用`vue-vant`或直接在`package.json`中添加`vant`作为依赖。

   npm install vue-vant@latest // 或者 yarn add vant

2. **引入并注册组件**：
在`main.js`或`.vue`文件中引入Vant，并注册组件：

   import { Vant } from 'vant'
   Vue.use(Vant)

3. **在模板中使用Collapse组件**：
创建一个 `<van-collapse>` 元素，每个`<van-collapse-item>`代表一个折叠项，你可以通过`:value`属性控制展开状态。

   <van-collapse v-model="activeIndex">
     <van-collapse-item title="标题1" value="0">
       这是第一项的内容...
     </van-collapse-item>
     <van-collapse-item title="标题2" value="1">
       这是第二项的内容...
     </van-collapse-item>
   </van-collapse>

4. **管理状态**：
在组件的data或props中设置初始选中的index，例如：

   export default {
     data() {
       return {
         activeIndex: 0, // 默认第一个选项打开
       }
     },
     methods: {
       toggle(index) {
         this.activeIndex = index;
       }
     }
   }

5. **事件监听**：
Collapse组件提供了`change`事件，当折叠状态改变时触发，可以用于处理用户交互：

   <van-collapse @change="handleToggle">
     ...
   </van-collapse>

   methods: {
     handleToggle({ index }) {
       console.log('切换到了第', index, '项');
     }
   }