vue+vant+van-collapse（Collapse 折叠面板）的右侧箭头方向改变 // 图标改变 // 标题改变

本文介绍了如何使用Vant UI库中的van-collapse组件实现标题可定制的折叠面板，并探讨了如何在手风琴模式下切换展开状态，包括箭头图标和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改变标题

// 官方文档
<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>标题1 <van-icon name="question-o" /></div>
    </template>
    内容
  </van-collapse-item>
  <van-collapse-item title="标题2" name="2" icon="shop-o">
    内容
  </van-collapse-item>
</van-collapse>
export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

改变箭头方向或者箭头图标

// accordion手风琴，这个时候绑定的activeNames就是一个对象，而不是一个数组了
// 如果需要展开多个的，去掉accordion这个就好
<van-collapse v-model="activeNames" accordion>
   <van-collapse-item v-for="(item,index) in serverList" :title="item.title" :name="item.id" :key="index">
       <template #right-icon>
       		// 只允许展开单个
           <van-icon :name="activeNames == item.id ? 'cross' : 'plus'" />
           // 展开多个 然后吧v-for渲染的地方的name的值换成index就可以了
           // 只是这里有个问题，展开多个的时候，图标还是只更换了一个，这个问题暂时没有解决
           <van-icon :name="activeNames.indexOf(index) ? 'cross' : 'plus'" />
       </template>
       // 写其他样式的地方
   </van-collapse-item>
</van-collapse>

// js
data: {
	activeNames: ''
}

// css
.van-icon-plus,
.van-icon-cross {
    color: #8bc63e;
}