Vant?如何修改van-collapse-item右側(cè)圖標(biāo)

更新時(shí)間：2022年04月26日 08:42:52 投稿：jingxian

這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

修改van-collapse-item右側(cè)圖標(biāo)

根據(jù)官方文檔給出的示例，可以使用插槽來改變左側(cè)圖標(biāo)樣式

<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è)#來綁定需要更改的東西，可以認(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)及其顏色,保留原來動(dòng)畫

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

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

然后大膽的將它拿過來放到自己的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)文章

vue中常用方法的用法匯總
Vue.js?是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架,本文主要為大家整理了一些常用的?Vue?方法及其詳細(xì)說明和代碼示例,有需要的小伙伴可以參考一下
2023-11-11
Vue 重置組件到初始狀態(tài)的方法示例
這篇文章主要介紹了Vue 重置組件到初始狀態(tài)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
一文學(xué)會(huì)什么是vue.nextTick()
這篇文章主要介紹了一文學(xué)會(huì)什么是vue.nextTick()，下面文章圍繞主題的相關(guān)資料展開詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn)
本文主要介紹了將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn),使用Express生成器部署和前端Vue項(xiàng)目部署,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-03-03
Vue下拉選擇框Select組件使用詳解(一)
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
如何修改vuex里面的數(shù)據(jù)
這篇文章主要介紹了如何修改vuex里面的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
對(duì)vue事件的延遲執(zhí)行實(shí)例講解
今天小編就為大家分享一篇對(duì)vue事件的延遲執(zhí)行實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
使用Vue-neo4j實(shí)現(xiàn)繪制三國人物圖譜關(guān)系
這篇文章主要介紹了使用Vue-neo4j實(shí)現(xiàn)繪制三國人物圖譜關(guān)系,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue實(shí)現(xiàn)橫屏滾動(dòng)公告效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫屏滾動(dòng)公告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)
Vue 創(chuàng)建組件的方法有哪些呢？下面小編就為大家分享一篇Vue 創(chuàng)建組件的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02