diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index cbafc9a25..95190c94e 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -20,6 +20,7 @@ export default createComponent({
icon: String,
name: [Number, String],
info: [Number, String],
+ iconPrefix: String,
},
data() {
@@ -47,20 +48,31 @@ export default createComponent({
this.$emit('click', event);
route(this.$router, this);
},
+
+ genIcon(active) {
+ const slot = this.slots('icon', { active });
+
+ if (slot) {
+ return slot;
+ }
+
+ if (this.icon) {
+ return ;
+ }
+ },
},
render() {
- const { icon, slots } = this;
const active = this.parent.route ? this.routeActive : this.active;
const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
return (
- {slots('icon', { active }) || (icon && )}
+ {this.genIcon(active)}
-
{slots('default', { active })}
+
{this.slots('default', { active })}
);
},
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 0d27b4ce9..6da4777e8 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -179,6 +179,7 @@ export default {
|------|------|------|------|
| name | Identifier | *number \| string* | Item index |
| icon | Icon name | *string* | - |
+| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
| dot | Whether to show red dot | *boolean* | - |
| info | Content of the badge | *number \| string* | - |
| url | Link | *string* | - |
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index e0e9ebc66..da612e324 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -186,6 +186,7 @@ export default {
|------|------|------|------|
| name | 标签名称,作为匹配的标识符 | *number \| string* | 当前标签的索引值 |
| icon | [图标名称](#/zh-CN/icon)或图片链接| *string* | - |
+| icon-prefix `v2.5.3` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` |
| info | 图标右上角徽标的内容 | *number \| string* | - |
| url | 点击后跳转的链接地址 | *string* | - |