vant组件手风琴右侧图标移到左侧并自动切换的方法

代码如下：

其中主要是

      <van-collapse-item :name="0" :icon="icon_up"><div class="right-icon" slot="right-icon"><img :src="activeName == 0 &&  activeName !== '' ? icon_up:icon_down" alt /></div>.......省略没写</van-collapse-item>

思路是icon 是设置左侧图标的，先设置左侧图标，然后给其隐藏，在style里有体现，我找到了他的class样式，然后隐藏起来了

  .van-cell__left-icon {display: flex;align-items: center;width: 0.32rem;height: 0.32rem;margin-right: 0.18rem;opacity: 0; //使左侧图标隐藏img {width: 100%;height: 100%;display: block;}}

然后把右侧原本的图标自定义，添加我们像替换的图片

     <div class="right-icon" slot="right-icon"><img :src="activeName == 0 &&  activeName !== '' ? icon_up:icon_down" alt /></div>

通过activeName 来判断是否是展开状态，来对此显示不同的图片，
最后找到右侧图标的样式

 .right-icon {position: absolute;left: 0;width: 0.32rem;height: 0.32rem;img {width: 100%;height: 100%;display: block;}}

把他移动到左侧图标的位置，这样就完成了我们想要的效果，我们看下效果图吧

vant组件手风琴右侧图标移到左侧并自动切换的方法相关推荐

【uniapp】Vant组件旋转Icon图标
比如想使用一个向右的图标,但是发现只有向下的,还懒得引入.直接旋转90度即可,Api中有这个属性:custom-style-自定义样式 <view class="right_icon& ...
vant自定义引入iconfont图标以及字体
因为vantUI给的图标非常少,为了满足自己的需求,必须自定义图标,这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法第一步:去阿里矢量库下载图标点击资源管理->我的项目 ...
Vue移动端 Vant的组件使用自定义图标
Vant自带的图标比较少,有时候不能满足使用. 普通使用第三方图标我一般使用阿里图标找到自己想要的图片然后加入购物车 1.点击下载代码 2.下载完成后放在项目中,如放在src/assets下, ...
【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景
感觉自己封装的返回组件不太好用,于是尝试用一下Vant组件库里的 NavBar [uniapp]小程序自定义一个通用的返回按钮组件_小付学代码的博客-CSDN博客_uniapp自定义返回按钮左边箭头, ...
使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面
本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...
用一用Vant组件库
目录一.Vant是什么? 二.小案例 2.1 准备工作 2.2 功能实现三.总结本篇文章主要讲述如何在Vue2中使用Vant2组件库,面向会Vue基础初次使用Vant组件库的对象,大概阅读时间5 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
详解vant组件应用于Vue2
目录 1.安装 1.1 npm安装 1.2 CDN安装 1.3 利用脚手架安装 1.3.1 安装脚手架(没有安装脚手架的) 1.3.2 利用脚手架创建程序 1.3.3 使用vue ui进行依赖的安装 ...

vant组件手风琴右侧图标移到左侧并自动切换的方法

vant组件手风琴右侧图标移到左侧并自动切换的方法

vant组件手风琴右侧图标移到左侧并自动切换的方法相关推荐

最新文章

热门文章

vant组件手风琴 右侧图标 移到左侧并自动切换的方法

vant组件手风琴 右侧图标 移到左侧并自动切换的方法

vant组件手风琴 右侧图标 移到左侧并自动切换的方法相关推荐

最新文章

热门文章

vant组件手风琴右侧图标移到左侧并自动切换的方法

vant组件手风琴右侧图标移到左侧并自动切换的方法

vant组件手风琴右侧图标移到左侧并自动切换的方法相关推荐