如何将iconfont图标引入到vant的Tabbar标签栏里边

目录
  • 将iconfont图标引入vant的Tabbar标签栏里
    • 1. 首先引入tabbar
    • 2. 以基础代码为例
  • vue+vant引入iconfont字体图标

将iconfont图标引入vant的Tabbar标签栏里

vant的Tabbar标签栏https://youzan.github.io/vant/

在app开发中,这个必不可少,上一张讲了怎么引入iconfont图标,现在就将iconfont图标引入到tabbar标签栏里边,看着vant提供的图标,必将有点丑啊23333,接下来就是引入方法:

1. 首先引入tabbar

2. 以基础代码为例

我现在就把这个第一个图标换掉,换成iconfont图标

第一个图标标签为

<van-tabbar-item icon="home-o">标签</van-tabbar-item>

把这行代码换成如下:

<van-tabbar-item>
    <van-icon class="iconfont" class-prefix='icon' slot="icon" slot-scope="props" :name='props.active ? icon.home_active:icon.home_normal'></van-icon>
    <span>home</span>
</van-tabbar-item>

相应的,js代码为:

slot-scope="props" 这个属性就是用来判断图标是不是被选中的,

这是官方文档的原话。

:name='props.active ? icon.home_active:icon.home_normal' 这行代码的意思就是

当 props.active 为 true,说明处于选中状态,此时会调用名称 icon.home_active,如果不在选中状态,那么会调用名称  icon.home_normal,通过 查看js代码,可以知道,icon.home_active 就是 home,icon.home_normal 就是 homefill

之所以是这个名称,那是因为

可以看见iconfont矢量图的名称就是home 和 homefill,这可不是我随便取的,要看看你想调用的iconfont图标名称是啥

于是,:name='props.active ? icon.home_active:icon.home_normal 还可以这么理解:

当处于选中状态的时候,调用 homefill图标 ,不是选中状态的是,调用home图标

接下来看看效果:

处于选中状态的时候,

不是选中状态的时候,

这么一来就可以实现 iconfont图标的自由切换了,随心所欲,可能有些小伙伴想要改变颜色,这个其实很简单,官方文档就有修改颜色的方法:https://youzan.github.io/vant/

我把处于选中状态的时候颜色变成 hotpink,一个很骚的颜色

这就是效果图,好骚啊23333

方法分享就到这里了,其实如果想有实际应用的话,应该要加上路由模式,这样一个Tabbar标签栏才算是一个比较完美的Tabbar标签栏。

vue+vant引入iconfont字体图标

使用的是iconfont的图标,下载至本地使用的,图标比较少,使用的文件中引入,使用import或者css的@import都不行,一直报错最后被逼无奈,在main.js中引入的图标

这不是我本意,后续有时间继续探讨在指定文件引入字体图标的问题

使用的时候是van-field的组件中使用的,该组件自带了后缀图标的引入方法:

<van-field
  v-model="value1"
  label="文本"
  left-icon="smile-o"
  right-icon="warning-o"
  placeholder="显示图标"
/>

其中left-icon表示在左侧插入图标,right-icon表示在右侧插入图标,但是直接使用iconfont的方法写入不生效

最后解决办法是在van-field的组件中插入van-icon的组件结合slot的方法插入,代码如下

<van-field
  v-model='textarea'
  rows='2'
  maxlength = '200'
  label='请输入留言'
  show-word-limit
  placeholder='可以点击语音输入文字'
  @click-right-icon='getSpeak'>
  <van-icon class='iconfont' class-prefix='icon' slot='right-icon' name='yuyin'></van-icon>
</van-field>

其中class-prefix=‘icon’的写法固定,暂时未找到其原因,slot='right-icon'表示插入到van-field中的right-icon中,最后呈现效果

(0)

相关推荐

  • vue 修改vant自带的样式过程

    目录 修改vant自带的样式 解决办法 vant的样式怎么修改不了? 修改vant自带的样式 今天用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效. css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用. 在vue项目中,当style 标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法 1.对于css语法起作用 使用深度选择器,

  • 利用vant如何给tabbar配置路由

    目录 给tabbar配置路由 在父级路由写tabbar标签 在路由配置的JavaScript文件中 vant踩坑记录 tabbbar路由模式 这里使用路由传参 给tabbar配置路由 在父级路由写tabbar标签 <template> <div class="layoutContainer">     <!-- 子路由出口 -->     <router-view></router-view>     <!-- 底部导航

  • Vant的Tabbar标签栏引入自定义图标方式

    目录 Tabbar标签栏引入自定义图标 vant自义定Tabbar图标和颜色 Tabbar标签栏引入自定义图标 **使用*van-tabbar*组件** *v-model*绑定的是对应的Tabbar下标 *active-color*是未选中的文字颜色 *inactive-color*是已选中的文字颜色 **route**这个要特别注意,我就是在这踩了坑,我没有加这个参数,但是能正常跳转路由,但是图标选中会出现问题,每次都需要双击.一直以为是插槽的问题,后面才发现官方api的这个参数 *van-t

  • 如何将iconfont图标引入到vant的Tabbar标签栏里边

    目录 将iconfont图标引入vant的Tabbar标签栏里 1. 首先引入tabbar 2. 以基础代码为例 vue+vant引入iconfont字体图标 将iconfont图标引入vant的Tabbar标签栏里 vant的Tabbar标签栏https://youzan.github.io/vant/ 在app开发中,这个必不可少,上一张讲了怎么引入iconfont图标,现在就将iconfont图标引入到tabbar标签栏里边,看着vant提供的图标,必将有点丑啊23333,接下来就是引入方

  • vue中使用iconfont图标的过程

    目录 vue引入iconfont图标 引入在线链接文件 vue使用iconfont多色图标 vue引入iconfont图标 引入在线链接文件 如果开发过程中需要不断更新图标,为了避免多次下载文件到本地,可以先选择使用在线链接的图标文件 前面的步骤就不赘述了,直接讲如何在vue中引入 查看项目在线链接 我 选的是 Unicode 的形式 在项目中的 assets/css 文件夹下新建 global.css 文件,复制刚才生成的 font-face 代码,如何定义iconfont 类 @font-f

  • vue项目引入Iconfont图标库的教程图解

    在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤, 1. 在阿里图标库中选中你想要的图标库,并点击进去, 2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图标时,可以去其他的图标库中进行选择,但是要记住离开这个图标库的时候,记得将选择的图标加入自己创建的项目中, 不然去其他图

  • vue引入iconfont图标库的优雅实战记录

    目录 前言 生成SVG svg sprites简介 获取项目图标 项目设置 图标引用 组件引用 多主题支持 配置多主题样式 Icon改造 页面校验 尾言 前言 本文撰写的初衷是为了向组内成员推行使用svg sprites的方式管理项目的图标,由于实际工作中很多项目仍然采用font class的方式,这样不自觉带来一个痛点. 当项目一期开发完毕后,过段时间进入到项目二期.新增的开发需求不可避免的会增加新的图标,而font class需要全量打包图标的字体文件. 哪怕新需求只添加了一个图标,而前端同

  • 微信小程序引用iconfont图标的方法

    最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('ico

  • VUE在线调用阿里Iconfont图标库的方法

    前言 多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网上费好大劲,东拼西凑的找一些icon的图片,来美化我们的网页,然而随着技术的发展,和一些大平台的技术奉献,这里不得不说阿里还是牛逼,这里不是夸它,给它打广告,确实,人家在一些领域做的比某腾要好,可能也和领域有关吧,受我个人认知水平问题,我也只能这么认为,比如在我门JAVA服务端方向,阿里有Nacos

  • iOS中如何使用iconfont图标实例详解

    1.什么是iconfont iconFont拆开来看,就是 Icon + Font,这样估计大家应该都能理解是什么,那两者结合是什么呢?没错!就是 IconFont !让开发者像使用字体一样使用图标.如果自己不会做的话,可以直接去阿里的iconfont图标库下载自己需要的图标. 2.为什么要使用iconfont 在开发项目时,不可避免的会用到各种图标,为了适配不同的设备,通常需要@2x和@3x两套图,例如说我们tabBar上使用的图标.有些app有换肤的需要,还需要多套不同的图来进行匹配不同的主

  • Vue 第三方字体图标引入 Font Awesome的方法

    Font Awesome 用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利,不管是在加载还是修改方面,字体图符远远优于图片.但是饿了吗封装的Element UI提供的字体图符少之又少,又不想用图片,只能自己扩展图符咯. Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.还有很多优点不一一举例,可自行查看文档:http://fontawesome.dashgame.com/ npm 安

  • 本地Bootstrap文件字体图标引入却无法显示问题的解决方法

    你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题. 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap字体图标

随机推荐