文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

将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中,最后呈现效果

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯