diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 51cc9faf0..681150a0e 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -112,6 +112,31 @@ export default {
```
+
+### Change Event
+
+```html
+
+ Tab1
+ Tab2
+ Tab3
+ Tab4
+
+```
+
+```js
+export default {
+ methods: {
+ onChange(index) {
+ Notify({ type: 'primary', message: index });
+ }
+ }
+}
+```
+
### Route Mode
```html
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index e2552ef9d..6df4dd309 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -118,6 +118,30 @@ export default {
```
+### Change 事件
+
+```html
+
+ 标签1
+ 标签2
+ 标签3
+ 标签4
+
+```
+
+```js
+export default {
+ methods: {
+ onChange(index) {
+ Notify({ type: 'primary', message: index });
+ }
+ }
+}
+```
+
### 路由模式
标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index c30966a86..96a25d7ff 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -48,6 +48,15 @@
{{ $t('tab') }}
+
+
+
+ {{ $t('tab') + 1 }}
+ {{ $t('tab') + 2 }}
+ {{ $t('tab') + 3 }}
+ {{ $t('tab') + 4 }}
+
+
@@ -58,13 +67,17 @@ export default {
badge: '提示信息',
customIcon: '自定义图标',
customColor: '自定义颜色',
- matchByName: '通过名称匹配'
+ matchByName: '通过名称匹配',
+ switchEvent: '切换标签事件',
+ selectTip: '你切换到了'
},
'en-US': {
badge: 'Show Badge',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
- matchByName: 'Match by name'
+ matchByName: 'Match by name',
+ switchEvent: 'Change Event',
+ selectTip: 'You select '
}
},
@@ -74,12 +87,22 @@ export default {
active2: 0,
active3: 0,
active4: 0,
+ active5: 0,
activeName: 'home',
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
};
+ },
+
+ methods: {
+ onChange(index) {
+ this.$notify({
+ type: 'primary',
+ message: `${this.$t('selectTip')} ${this.$t('tab')}${index + 1}`
+ });
+ }
}
};
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index 08cf7c656..5412410e6 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -154,5 +154,37 @@ exports[`renders demo correctly 1`] = `
+
`;