底部导航栏,用于在不同页面之间进行切换。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { Tabbar, TabbarItem } from "vant";
const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);
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>
import { ref } from "vue";
export default {
setup() {
const active = ref(0);
return { active };
},
};
在标签指定 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>
import { ref } from "vue";
export default {
setup() {
const active = ref("home");
return { active };
},
};
设置 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>
import { ref } from "vue";
export default {
setup() {
const active = ref(0);
const icon = {
active: "https://img.yzcdn.cn/vant/user-active.png",
inactive: "https://img.yzcdn.cn/vant/user-inactive.png",
};
return {
icon,
active,
};
},
};
通过 active-color 属性设置选中标签的颜色,通过 inactive-color 属性设置未选中标签的颜色。
<van-tabbar v-model="active" active-color="#ee0a24" 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>
通过 change 事件来监听选中标签的变化。
<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 { ref } from "vue";
import { Toast } from "vant";
export default {
setup() {
const active = ref(0);
const onChange = (index) => Toast(`标签 ${index}`);
return {
icon,
onChange,
};
},
};
标签栏支持路由模式,用于搭配 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>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前选中标签的名称或索引值 | number | string | 0
|
fixed | 是否固定在底部 | boolean | true
|
border | 是否显示外边框 | boolean | true
|
z-index | 元素 z-index | number | string | 1
|
active-color | 选中标签的颜色 | string | #1989fa
|
inactive-color | 未选中标签的颜色 | string | #7d7e80
|
route | 是否开启路由模式 | boolean | false
|
placeholder | 固定在底部时,是否在标签位置生成一个等高的占位元素 | boolean | false
|
safe-area-inset-bottom | 是否开启底部安全区适配,设置 fixed 时默认开启 | boolean | false
|
before-change | 切换标签前的回调函数,返回 false 可阻止切换,支持返回 Promise |
(name: number | string) => boolean | Promise<boolean> | - |
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换标签时触发 | active: number | string |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标签名称,作为匹配的标识符 | number | string | 当前标签的索引值 |
icon | 图标名称或图片链接 | string | - |
icon-prefix | 图标类名前缀,等同于 Icon 组件的 class-prefix 属性 | string | van-icon
|
dot | 是否显示图标右上角小红点 | boolean | false
|
badge | 图标右上角徽标的内容 | number | string | - |
url | 点击后跳转的链接地址 | string | - |
to | 点击后跳转的目标路由对象,等同于 vue-router 的 to 属性 | string | object | - |
replace | 是否在跳转时替换当前页面历史 | boolean | false
|
名称 | 说明 | 参数 |
---|---|---|
icon | 自定义图标 | active: boolean |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-tabbar-height | 50px | - |
--van-tabbar-z-index | 1 | - |
--van-tabbar-background-color | var(--van-white) | - |
--van-tabbar-item-font-size | var(--van-font-size-sm) | - |
--van-tabbar-item-text-color | var(--van-gray-7) | - |
--van-tabbar-item-active-color | var(--van-primary-color) | - |
--van-tabbar-item-active-background-color | var(--van-white) | - |
--van-tabbar-item-line-height | 1 | - |
--van-tabbar-item-icon-size | 22px | - |
--van-tabbar-item-icon-margin-bottom | var(--van-padding-base) | - |
提供了一套常用的图标集合。使用方法直接通过设置类名为 el-icon-iconName 来使用即可。例如:render() {return (divi className...
内置过渡动画Element Plus 内应用在部分组件的过渡动画,你也可以直接使用。在使用之前请阅读transition 组件文档。fade 淡入淡...
events.focusnodeadjacency |Eventgraph 的邻接节点高亮事件。参见focusNodeAdjacency。events.unfocusnodeadjacency|Eventgraph...
action.graph | *关系图相关的行为,必须引入关系图后才能使用。action.graph.focusNodeAdjacency | Action将指定的节点以及其所...
singleAxis.data[i] |ObjectECharts单轴的类目数据,在类目轴(type: 'category')中有效。示例:// 所有类目名称列表da...
singleAxis.axisLine |ObjectECharts 单轴轴线相关设置。singleAxis.axisLine.show |boolean[ default: true ]是否显示单轴轴线...
在 ECharts 系列中通过使用 series[i]-scatter 来实现散点(气泡)图。直角坐标系上的散点图可以用来展现数据的x,y之间的关系,...