<van-collapse v-model="activeNames">
? <van-collapse-item name="1">
? ? <template #title>
? ? ? <div>標(biāo)題1 <van-icon name="question-o" /></div>
? ? </template>
? ? 內(nèi)容
? </van-collapse-item>
</van-collapse>

在template中，給了一個(gè)#來(lái)綁定需要更改的東西，可以認(rèn)為是選擇器一樣

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

然后根據(jù)插槽里自定義的類名進(jìn)行修改右側(cè)圖標(biāo)或者文案，此處也可以使用Vant自帶的icon進(jìn)行修改

<van-collapse v-model="activeName" accordion>
? <template #right-icon>
? ? ?<div>標(biāo)題1 <van-icon name="question-o" /></div>
? ? ? ? </template>
? ? ?</van-collapse-item>
? ?</van-collapse>

修改vant collapse折疊面板右側(cè)圖標(biāo)及其顏色,保留原來(lái)動(dòng)畫

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
  //為了更好的自定義樣式，使用插槽來(lái)修改標(biāo)題和右側(cè)圖標(biāo)
    <template #title>
      <div>標(biāo)題1</div>
    </template>
    //我以為這樣寫他會(huì)保留官網(wǎng)的動(dòng)畫的，然而是我想多了，這樣寫只是修改了顏色但是卻沒(méi)了動(dòng)畫
    <template #right-icon >
       <van-icon name="arrow-down" :color="color"/>
    </template> 
    內(nèi)容
  </van-collapse-item>
</van-collapse>

然后翻閱了一些資料都沒(méi)找到有效的方法，抱著試一試的心態(tài)去看了調(diào)試的代碼樣式，看到它的class

然后大膽的將它拿過(guò)來(lái)放到自己的icon中，結(jié)果成了：

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單，今天通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果
這篇文章主要介紹了基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
餓了么UI中el-tree樹節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項(xiàng)目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關(guān)于餓了么UI中el-tree樹節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-07-07
在vue中使用公共過(guò)濾器filter的方法
這篇文章主要介紹了在vue中使用公共過(guò)濾器filter的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
vue引入Excel表格插件的方法
這篇文章主要為大家詳細(xì)介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
沒(méi)有搭建腳手架時(shí)vue組件的使用方式
這篇文章主要介紹了沒(méi)有搭建腳手架時(shí)vue組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Element表格表頭行高問(wèn)題解決
在最近一個(gè)項(xiàng)目的后臺(tái)管理系統(tǒng)中，寫前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來(lái)詳細(xì)的介紹一下
2021-09-09
Vue3?通過(guò)作用域插槽實(shí)現(xiàn)樹形菜單嵌套組件
這篇文章主要為大家介紹了Vue3?通過(guò)作用域插槽實(shí)現(xiàn)樹形菜單嵌套組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
vue mounted組件的使用
這篇文章主要介紹了vue mounted組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06