Vant 如何修改van-collapse-item右侧图标

更新时间：2022年04月26日 08:42:52 投稿：jingxian

这篇文章主要介绍了Vant 如何修改van-collapse-item右侧图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

修改van-collapse-item右侧图标

根据官方文档给出的示例，可以使用插槽来改变左侧图标样式

<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>

在template中，给了一个#来绑定需要更改的东西，可以认为是选择器一样

<van-collapse v-model="activeName" accordion>
        <template #right-icon>
          <div>123</div>
        </template>
      </van-collapse-item>
    </van-collapse>

然后根据插槽里自定义的类名进行修改右侧图标或者文案，此处也可以使用Vant自带的icon进行修改

<van-collapse v-model="activeName" accordion>
  <template #right-icon>
     <div>标题1 <van-icon name="question-o" /></div>
        </template>
     </van-collapse-item>
   </van-collapse>

修改vant collapse折叠面板右侧图标及其颜色,保留原来动画

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
  //为了更好的自定义样式，使用插槽来修改标题和右侧图标
    <template #title>
      <div>标题1</div>
    </template>
    //我以为这样写他会保留官网的动画的，然而是我想多了，这样写只是修改了颜色但是却没了动画
    <template #right-icon >
       <van-icon name="arrow-down" :color="color"/>
    </template> 
    内容
  </van-collapse-item>
</van-collapse>

然后翻阅了一些资料都没找到有效的方法，抱着试一试的心态去看了调试的代码样式，看到它的class

然后大胆的将它拿过来放到自己的icon中，结果成了：

<template #right-icon >
     <van-icon name="arrow-down" class="van-icon van-icon-arrow van-cell__right-icon" :color="color"/>
</template>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中常用方法的用法汇总
Vue.js 是一个用于构建用户界面的渐进式框架,本文主要为大家整理了一些常用的 Vue 方法及其详细说明和代码示例,有需要的小伙伴可以参考一下
2023-11-11
Vue 重置组件到初始状态的方法示例
这篇文章主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
一文学会什么是vue.nextTick()
这篇文章主要介绍了一文学会什么是vue.nextTick()，下面文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
将vue+nodejs项目部署到服务器上的实现
本文主要介绍了将vue+nodejs项目部署到服务器上的实现,使用Express生成器部署和前端Vue项目部署,具有一定的参考价值,感兴趣的可以了解一下
2025-03-03
Vue下拉选择框Select组件使用详解(一)
这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
如何修改vuex里面的数据
这篇文章主要介绍了如何修改vuex里面的数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
对vue事件的延迟执行实例讲解
今天小编就为大家分享一篇对vue事件的延迟执行实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
使用Vue-neo4j实现绘制三国人物图谱关系
这篇文章主要介绍了使用Vue-neo4j实现绘制三国人物图谱关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue实现横屏滚动公告效果
这篇文章主要为大家详细介绍了vue实现横屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue 创建组件的两种方法小结(必看)
Vue 创建组件的方法有哪些呢？下面小编就为大家分享一篇Vue 创建组件的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02