Vant for Vue Tabbar标签栏自定义图标及颜色的方法

Vant 的引入我就不写了,可以参考 官方API文档 ,因为 Vant for Vue 的官网可能不太好找,不同框架的语法不一样,我就直接把链接贴过来了,也方便我自己后期查阅。

首先看一下基础用法:

v-model 默认绑定选中标签的索引值,通过修改 v-model 即可切换选中的标签。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
  data() {
    return {
      active: 0,
    };
  },
};

通过名称匹配:

在标签指定 name 属性的情况下,v-model 的值为当前标签的 name

<van-tabbar v-model="active">
  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
  data() {
    return {
      active: 'home',
    };
  },
};

徽标提示:

设置 dot 属性后,会在图标右上角展示一个小红点。设置 badge 属性后,会在图标右上角展示相应的徽标。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o" badge="5">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
</van-tabbar>

自定义图标:

通过 icon 插槽自定义图标,可以通过 slot-scope 判断标签是否选中

<van-tabbar v-model="active">
  <van-tabbar-item badge="3">
    <span>自定义</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
};

这里我讲一下,通过 slot-scope 判断就是,<template #icon="props"> ,判断 props 的值,是否为选中状态,修改对应的图片。

自定义颜色:

<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

监听切换事件:

<van-tabbar v-model="active" @change="onChange">
  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
  <van-tabbar-item icon="search">标签2</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
</van-tabbar>
import { Notify } from 'vant';

export default {
  methods: {
    onChange(index) {
      Notify({ type: 'primary', message: index });
    },
  },
};

路由模式:

标签栏支持路由模式,用于搭配 vue-router 使用。路由模式下会匹配页面路径和标签的 to 属性,并自动选中对应的标签。

<router-view />

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="home-o">
    标签
  </van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">
    标签
  </van-tabbar-item>
</van-tabbar>

API:

Tabbar Props

参数说明类型默认值
v-model当前选中标签的名称或索引值number | string0
fixed是否固定在底部booleantrue
border是否显示外边框booleantrue
z-index元素 z-indexnumber | string1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
route是否开启路由模式booleanfalse
placeholder v2.6.0固定在底部时,是否在标签位置生成一个等高的占位元素booleanfalse
safe-area-inset-bottom是否开启底部安全区适配,设置 fixed 时默认开启booleanfalse

Tabbar Events

事件名说明回调参数
change切换标签时触发active: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称,作为匹配的标识符number | string当前标签的索引值
icon图标名称或图片链接string-
icon-prefix v2.5.3图标类名前缀,同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge v2.5.6图标右上角徽标的内容number | string-
info图标右上角徽标的内容(已废弃,请使用 badge 属性)number | string-
url点击后跳转的链接地址string-
to点击后跳转的目标路由对象,同 vue-router 的 to 属性string | object-
replace是否在跳转时替换当前页面历史booleanfalse

TabbarItem Slots

名称说明SlotProps
icon自定义图标active: 是否为选中标签


未经允许不得转载:Web前端开发资源网 » Vant for Vue Tabbar标签栏自定义图标及颜色的方法

推荐阅读:

CSS中的background属性与margin和padding内外边距的关系总结

phpsStorm实现打开*.jsp文件代码高亮和代码格式化

Linux下导入SQL文件及MySQL常用命令

Discuz X3.4 MySQL数据库连接问题的解决方法

各大网站CSS初始化代码集合

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)