Vant 如何修改van-collapse-item右侧图标

目录
  • 修改van-collapse-item右侧图标
  • 修改vant Collapse折叠面板右侧图标及其颜色,保留原来动画

修改van-collapse-item右侧图标

根据官方文档给出的示例，可以使用插槽来改变左侧图标样式

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>标题1 <van-icon name="question-o" /></div>
    </template>
    内容
  </van-collapse-item>
</van-collapse>

在template中，给了一个#来绑定需要更改的东西，可以认为是选择器一样

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

然后根据插槽里自定义的类名进行修改右侧图标或者文案，此处也可以使用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>
    //我以为这样写他会保留官网的动画的，然而是我想多了，这样写只是修改了颜色但是却没了动画
    <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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解mpvue中使用vant时需要注意的onChange事件的坑

    最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-

  • Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    目录 问题重现 需求实现 附:vant之van-collapse无法默认展开某一项的解决方法 总结 问题重现 最近在做项目时,有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态:我使用到了 Vant UI 组件,首先按照官网文档的写法直接引入: <!--下拉折叠面板--> <van-collapse class="collapse" v-model="activeNames" is-link="false&quo

  • Element Collapse 折叠面板的使用方法

    本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/collapse 基础用法 普通折叠面板 <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div&

  • 在vant 中使用cell组件 定义图标该图片和位置操作

    @本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> <!--<van-cell icon="" title="二级经营单位&quo

  • Vant 如何修改van-collapse-item右侧图标

    Vant 如何修改van-collapse-item右侧图标

    目录 修改van-collapse-item右侧图标 修改vant Collapse折叠面板右侧图标及其颜色,保留原来动画 修改van-collapse-item右侧图标 根据官方文档给出的示例,可以使用插槽来改变左侧图标样式 <van-collapse v-model="activeNames">   <van-collapse-item name="1">     <template #title>       <div

  • PyQt QListWidget修改列表项item的行高方法

    百度,谷歌之后都说用setHintSize(self,QCore.QSize(width,height)),然并卵,后来用qss修改就可以了,具体用法如下 以上这篇PyQt QListWidget修改列表项item的行高方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vant如何修改placeholder样式

    vant如何修改placeholder样式

    目录 如何修改placeholder样式 设置placeholder属性样式的多种写法 第一种最简单的写法 第二种写法 第三种写法 如何修改placeholder样式 ::-webkit-input-placeholder { color: #ffffff; font-weight: 400; } /* Firefox 4-18 */ :-moz-placeholder { color: #ffffff; font-weight: 400; } /* Firefox 19-50 */ ::-mo

  • 如何修改 mac地址的方法

    各个不同品牌的网卡有专用的刷新程序,需要针对芯片型号下载相应的刷新程序 轻松修改网卡MAC地址   网卡的MAC地址是固化在网卡EPROM中的物理地址,是一块网卡的"身份证",通常为48位.在平常的应用中,有很多方面与MAC地址相关,如有些软件是和MAC地址绑定的,没有允许的MAC地址,软件就无法运行:或者在局域网里,管理人员常常将IP与客户机的MAC地址绑定,以方便管理,万一用户的网卡坏掉了,自行更改网卡后必须向管理人员申请更改绑定的MAC地址,这样就比较麻烦.在这种时候,如果我们能

  • vue 使用vant插件做tabs切换和无限加载功能的实现

    样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观 官方文档 我在文件中

  • Eclipse自定义启动画面和图标的方法介绍

    很多小伙伴都有修改Eclipse启动画面或图标的需求,寻找自己的个性化嘛,今天我就给大家说一下如何修改. 一. 启动画面自定义 第一种情况:.纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体版本号可能不一样,看前面包名就可以了. 第二种情况:.Android ADT bundle 找到ADT bundle安装路径下\eclipse\plugins\com.android.ide.

  • vue 中url 链接左边的小图标更改问题

    修改url左边的小图标(标题前的小图标).例如: favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo. 1.首先得到或生成需要的ico文件.ps ico文件生成地址 http://bitbug.net/ 2.将生成的文件置于static文件夹下(可自行存放) 3.在index.html中,title下写入: <link rel="icon" href="./static/刚刚生成.ico的地址" re

  • C++使用cjson操作Json格式文件(创建、插入、解析、修改、删除)

    C++使用cjson操作Json格式文件(创建、插入、解析、修改、删除)

    目录 为什么要学习解析Json文件? 一.准备cJSON开源库 二.cJSON介绍 三.封装Json 四.解析Json 五.修改Json 六.删除Json 七.全部代码 八.总结 为什么要学习解析Json文件? 工作需要呗! 最近在工作项目中,有需求是需要进行解析Json字符串的,但是我只会使用QT去解析Json,且主管规定要使用C/C++语言去解析,说是为了方便移植到其他项目中进行使用… 没办法,只能硬着头皮,在网上找找有没有什么解析Json的开源库是C/C++可以使用的.找了许多,网上也提供

  • Bootstrap作品展示站点实战项目2

    Bootstrap作品展示站点实战项目2

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这个项目可以利用Bootstrap的很多内置特性,同时也将根据需要对Bootstrap进行一些定制. 1.设计目标 虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小设备开始,强迫自己聚焦在关键的要素上面. 这个作品展示站点应该具有下列功能: □ 带Logo的可折叠的响应式导航条: □ 重点展示四

随机推荐