Vant?如何修改van-collapse-item右側圖標
修改van-collapse-item右側圖標
根據(jù)官方文檔給出的示例,可以使用插槽來改變左側圖標樣式
<van-collapse v-model="activeNames"> ? <van-collapse-item name="1"> ? ? <template #title> ? ? ? <div>標題1 <van-icon name="question-o" /></div> ? ? </template> ? ? 內(nèi)容 ? </van-collapse-item> </van-collapse>
在template中,給了一個#來綁定需要更改的東西,可以認為是選擇器一樣
<van-collapse v-model="activeName" accordion> ? ? ? ? <template #right-icon> ? ? ? ? ? <div>123</div> ? ? ? ? </template> ? ? ? </van-collapse-item> ? ? </van-collapse>
然后根據(jù)插槽里自定義的類名進行修改右側圖標或者文案,此處也可以使用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> //我以為這樣寫他會保留官網(wǎ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中,結果成了:
<template #right-icon > <van-icon name="arrow-down" class="van-icon van-icon-arrow van-cell__right-icon" :color="color"/> </template>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果,實現(xiàn)步驟和思路都很簡單,今天通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11基于vue-draggable 實現(xiàn)三級拖動排序效果
這篇文章主要介紹了基于vue-draggable 實現(xiàn)三級拖動排序效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關于餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-07-07