亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vant?如何修改van-collapse-item右側圖標

 更新時間:2022年04月26日 08:42:52   投稿:jingxian  
這篇文章主要介紹了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)動效果

    這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果,實現(xiàn)步驟和思路都很簡單,今天通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-11-11
  • 基于vue-draggable 實現(xiàn)三級拖動排序效果

    基于vue-draggable 實現(xiàn)三級拖動排序效果

    這篇文章主要介紹了基于vue-draggable 實現(xiàn)三級拖動排序效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • 餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)

    餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)

    最近新做的項目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關于餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案

    Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案

    這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-07-07
  • 在vue中使用公共過濾器filter的方法

    在vue中使用公共過濾器filter的方法

    這篇文章主要介紹了在vue中使用公共過濾器filter的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-06-06
  • vue引入Excel表格插件的方法

    vue引入Excel表格插件的方法

    這篇文章主要為大家詳細介紹了vue引入Excel表格插件的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • 沒有搭建腳手架時vue組件的使用方式

    沒有搭建腳手架時vue組件的使用方式

    這篇文章主要介紹了沒有搭建腳手架時vue組件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Element表格表頭行高問題解決

    Element表格表頭行高問題解決

    在最近一個項目的后臺管理系統(tǒng)中,寫前端界面時用到了ElementUI,但是發(fā)現(xiàn)導入數(shù)據(jù)表格之后表頭的高度一直很高,那么如何解決,本文就來詳細的介紹一下
    2021-09-09
  • Vue3?通過作用域插槽實現(xiàn)樹形菜單嵌套組件

    Vue3?通過作用域插槽實現(xiàn)樹形菜單嵌套組件

    這篇文章主要為大家介紹了Vue3?通過作用域插槽實現(xiàn)樹形菜單嵌套組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • vue mounted組件的使用

    vue mounted組件的使用

    這篇文章主要介紹了vue mounted組件的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論