修改 vant 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> 

今次作记,便日后查阅!如有更好方法请不吝赐教,感激!

Vant 框架中,实现折叠面板折叠动画主要依赖于 `van-collapse` 和 `van-collapse-item` 组件。这些组件可以创建可展开和收起的面板列表,适用于展示需要按需显示的内容[^1]。 ### 使用 van-collapse 实现折叠面板 #### 1. 基本用法 首先,确保已经正确引入 `Collapse` 和 `CollapseItem` 组件: ```javascript import Vue from 'vue'; import { Collapse, CollapseItem } from 'vant'; Vue.use(Collapse); Vue.use(CollapseItem); ``` 然后,在模板中使用 `van-collapse` 包裹多个 `van-collapse-item` 来定义每个折叠项: ```html <van-collapse v-model="activeNames"> <van-collapse-item title="标题1" name="1">内容1</van-collapse-item> <van-collapse-item title="标题2" name="2">内容2</van-collapse-item> <van-collapse-item title="标题3" name="3">内容3</van-collapse-item> </van-collapse> ``` 在脚本部分定义 `activeNames` 来控制默认展开的面板: ```javascript export default { data() { return { activeNames: ['1'] // 默认展开第一个面板 }; } }; ``` #### 2. 默认展开第一项 如果希望默认展开第一个面板,只需将 `v-model` 绑定的数组设置为包含第一个面板的 `name` 值即可。例如,若第一个面板的 `name` 是 `'1'`,则 `activeNames` 应初始化为 `['1']` [^4]。 #### 3. 自定义样式与内容 可以通过 CSS 修改折叠面板的样式,例如去除下划线或上划线,或者在右侧添加图标等。Vant 提供了 `/deep/` 或 `::v-deep` 的方式来覆盖子组件的样式: ```css /deep/ .van-collapse-item__content { border-top: none; } /deep/ .van-collapse-item__header { position: static; } ``` #### 4. 折叠动画效果 Vant 的 `van-collapse` 组件内部已经实现了平滑的折叠动画效果,无需额外配置。当面板展开或收起时,会自动应用过渡动画--- ### 示例代码:完整折叠面板实现 ```html <template> <van-collapse v-model="activeNames"> <van-collapse-item title="面板 1" name="1">这是第一个面板的内容。</van-collapse-item> <van-collapse-item title="面板 2" name="2">这是第二个面板的内容。</van-collapse-item> <van-collapse-item title="面板 3" name="3">这是第三个面板的内容。</van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> <style scoped> /deep/ .van-collapse-item__header { position: static; } </style> ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值