- 如何定制图标
- 使用vant内置图标
- 更改图标的名字即可
- 使用iconfont字体图标
- 使用本地图片
- 1.在项目assets中准备图片
- 2.在main.js中引入并使用tabbar
-
// 1. Import the components you need
import { Tabbar, TabbarItem } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';
createApp(App).use(Tabbar).use(TabbarItem).mount('#app')
- 3.script:引入图片资源,并定义slot属性icon的图片资源
-
import h5 from "../assets/html-5.png"
import unity from "../assets/unity.png"
const active = ref(0);
const icon = {
active: h5,
inactive: unity,
};
- 4.template
-
<van-tabbar v-model="active" active-color="#f46">
<van-tabbar-item>
<span>Menu</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="fire" dot>Search</van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="5">Setting</van-tabbar-item>
</van-tabbar>
- 使用在线图片资源
- 使用对应的url即可
-
const icon = {
active: url,
inactive: url,
};