vant改变步骤条的icon

最新推荐文章于 2023-08-31 10:53:45 发布
最新推荐文章于 2023-08-31 10:53:45 发布
阅读量3.1k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014446094/article/details/107042890
版权

**

需求：改变steps组件的icon

**
本来的样子是这样的
在这里插入图片描述
现在的需求是改成别的icon
在这里插入图片描述

方法

先下载icon文件
在这里插入图片描述
百度阿里icon
在这里插入图片描述
搜索想要的icon加入购物车
在这里插入图片描述
在这里插入图片描述
选好了点下载代码
在这里插入图片描述
把这几个文件放到静态目录里面，然后再把iconfont.css文件引入，更改这个css的自己的icon
在这里插入图片描述
把Iconfont里面的代码添加到自己需要的下面然后把自己需要的icon前缀改成.van-icon-
在这里插入图片描述
最后在组件中使用自己的icon

Pabingo
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
vant 实现的步骤条
weixin_43829905的博客
12-24 2079
效果图： 上代码： <div class="group-div-active"> <div class="item-group item-group-1"> <div class="icon-div"> <van-icon class="iconfont icon-wancheng" size="30" /> <van-progress
vant步骤条，van-step自定义图标颜色
啥也不会只能CV
04-28 1万+
van-step自定义图标颜色 做项目遇到了步骤条，看了vant官网案例后感觉没问题，简单滴很。 ☝官方示例图 ????再来看看我的产品UI 看完感觉问题不大~ 不就是改改颜色，改改文字的位置么~ 我着手去做的时候发现了问题，才发现我不太好改啊，下面针对我们产品我的问题，目前我项目用的vant版本2.11.0： 问题1 目前我UI上有3种状态需要自定义①当前激活的②未激活的③已经激活过的这三种。但是目前我使用的2.11.0版本只支持自定义两种，第三种当前版本不支持。 问题2 我的文本竟然是在进度
view步骤条Steps更换图标icon
LbJ_MVP的博客
07-13 988
为特定Step更换icon
【vant】van-steps自定义图标
lucky Judy
05-20 4603
背景：要自定义步骤条的图片，但是官网上并没有找到相关示例，官网的自定义步骤条icon使用的是属性及vant的icons，我想要的是随便写什么，那就要用官网提供的slot 解决： 1、官网(vant官网)截图 2、实现：直接上代码，注意template的使用位置，内部使用div，用了背景图，so，完全定制。 <van-steps direction="vertical" :active="active"> <!--这里使用循环--> .
vant icon 修改
weixin_39428080的博客
09-09 677
vant icon 修改。
vant组件手风琴 右侧图标 移到左侧并自动切换的方法
chenlengsu_it的博客
05-12 1589
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 />
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
微信小程序引入VANT组件的方法步骤
10-16
总的来说，引入VANT组件到微信小程序需要完成以下步骤： 1. 初始化npm项目。 2. 安装vant-weapp依赖。 3. 使用微信开发者工具构建npm模块。 4. 在页面JSON文件中引入VANT组件。 5. 在WXML文件中使用VANT组件。 通过...
vantweapp源代码
01-25
7. **主题定制**：Vant WeApp支持主题定制，源代码中会有相应的配置和样式定义，帮助开发者轻松改变组件的整体风格。 8. **优化技巧**：源代码中还可能包含了针对微信小程序平台的性能优化技巧，如减少网络请求、...
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
【标题】：在Mpvue项目中集成Vant Weapp组件库的详细步骤 【描述】：本篇文章将详细介绍如何在基于Mpvue的项目中利用Vant Weapp组件库，提供了一个实用的指南，帮助开发者避免常见问题，提高开发效率。 【标签】：...
Vant元件框架，产品框架
03-18
这个库包括了如按钮、输入框、列表、轮播图、开关、选择器、日期选择器、步骤条、加载指示器等常见的UI组件。每个组件都经过精心设计和优化，具有良好的性能和兼容性，并且支持主题定制，可以根据品牌的视觉风格进行...
vue封装步骤条组件(文字可上下显示)
m0_62434937的博客
08-19 1455
个人业务需要因ui库不支持，自行封装的
vant实现步骤条功能
weixin_44774699的博客
05-26 2936
vant实现步骤条功能 实现效果图 demandData.js文件的数据格式 module.exports=[ { "demandName":"功能优化一期需求1", "proposeTime":"2021-05-23", "proposePart":"事业部", "proposePeople":"小小", "demandStage":["提出", "分析", "方案", "开发", "测试", "上线"], "demandStatus":"2",
vant4 自定义垂直步骤条时间线组件几行css代码改造完成（附效果图）
会点php的前端小渣渣
08-21 1182
【代码】vant4 自定义垂直步骤条时间线组件几行css代码改造完成（附效果图）
关于iconfont在vant组件中自定义的解决方案
qq_37978839的博客
09-16 1988
关于使用iconfont在vant-icon中的自定义 我们知道，vant的组件虽然功能很强大，而且图标也很多，但是我们还是会发现它的图标库并不能满足我们所有的需要，所以我写了这篇博客来记录如何在van-icon中自定义图标 在vant的官方文档icon图标这章有一个属性是class-prefix,官方文档的解释是自定义图标时进行应用，那么这个究竟是什么意思呢。当我们使用van-icon中的只传入name值为plus时，我们在生成的dom树中查看，会发现他会生成一个i标签，并携带类名 <i class
vant的NavBar导航栏可以自定义背景图片吗
最新发布
weixin_44727080的博客
08-31 1350
属性的值为要设置的背景图片的url地址。注意，如果要使用本地图片，可以使用相对路径或者绝对路径。属性的值为要设置的背景图片的url地址。注意，如果要使用本地图片，可以使用相对路径或者绝对路径。2.vant的van-tabbar可以自定义背景图片吗?可以的，Vant的NavBar导航栏提供了一个。属性，可以设置自定义背景图片。
小程序使用vant中的步骤条 vant-steps
hjh15827475896的博客
02-13 5384
今天写小程序页面的时候用到了 vant-steps ， 遇到了使用上的两个问题，在这里记录一下 问题一， 引入 vant -steps 之后， 最后一个节点的显示问题 不知道 别人的电脑会不会出现这个问题， 反正我的是有， 不影响， 但不爽，在开发者工具中看了半天， 就是那个图标跑到上面去了， 那我们使用 transform：translate 把它移下来不就好了 于是解决办法就出来了， 找到相对应的 选择器 .van-step--horizontal:last-child .van-step__circ
Android状态栏定制和修改
热门推荐
不精通则死
04-09 1万+
大家都知道定制在android开发中的重要性，因为通过定制，你才能制造出差异化的产品，才能满足更多消费者的需求， 像HTC生产的手机都通过了深层次的二次开发，今天我也来分享一下我的状态栏定制。 废话不说了，直接上图： 主要更换了背景，文字颜色以及icon的显示顺序. 2.    关键代码部分 a)    代码在系统中的位置 status bar 的相关代码位于：frameworks
修改van-stepper样式
lianflower的博客
08-16 725
此处没加scoped，则设置的样式会在全局中生效，为了避免影响其它页面的样式，则可以在定义custom-class的时候，把名字起的独立一点，例如和当前页面名称关联，例如当前页面名称为orderDetail，则可以把custom-class定义为：custom-class="orderDetail-test1"，这样就不会影响其它页面的样式了。3. 可以在van-stepper中直接定义custom-class，例如custom-class="test1"2. 比如我们想更改减号的样式。
vant步骤条该表改变样式
05-29
要改变 Vant 步骤条的样式，可以通过修改其 CSS 样式来实现。以下是一个示例，它将步骤条的默认样式更改为红色： ```css /* 步骤条默认样式 */ .v-stepper__step { color: #999; border-color: #999; background-color: #fff; } /* 当前步骤条样式 */ .v-stepper__step--active { color: #f00; border-color: #f00; background-color: #fff; } /* 已完成步骤条样式 */ .v-stepper__step--finished { color: #0f0; border-color: #0f0; background-color: #fff; } ``` 您可以在此基础上自定义其他样式，如字体大小或间距等。请注意，这些样式需要放在 Vant 样式表之后，以确保其优先级正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值