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

点击可查看原文章

改变标题

// 官方文档
<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'],
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

// 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// js
data: {
	activeNames: ''
}
1
2
3
4

// css
.van-icon-plus,
.van-icon-cross {
    color: #8bc63e;
}
1
2
3
4
5