blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

docs(Tabbar): add change event demo (#5173)

Browse Source
This commit is contained in:
Dottieworks 2019-12-05 11:12:03 +08:00 committed by neverland
parent 6f555b7040
commit 36086ff938
4 changed files with 106 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/tabbar/README.md
View File

@ -112,6 +112,31 @@ export default {
</van-tabbar>
```
### Change Event
```html
<van-tabbar
v-model="active"
@change="onChange"
>
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
<van-tabbar-item icon="search">Tab2</van-tabbar-item>
<van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>
<van-tabbar-item icon="setting-o">Tab4</van-tabbar-item>
</van-tabbar>
```
```js
export default {
methods: {
onChange(index) {
Notify({ type: 'primary', message: index });
}
}
}
```
### Route Mode
```html

24
src/tabbar/README.zh-CN.md
View File

@ -118,6 +118,30 @@ export default {
</van-tabbar>
```
### Change 事件
```html
<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="freinds-o">标签3</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
</van-tabbar>
```
```js
export default {
methods: {
onChange(index) {
Notify({ type: 'primary', message: index });
}
}
}
```
### 路由模式
标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签

27
src/tabbar/demo/index.vue
View File

@ -48,6 +48,15 @@
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('switchEvent')">
<van-tabbar v-model="active5" @change="onChange">
<van-tabbar-item icon="home-o">{{ $t('tab') + 1 }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') + 2 }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</van-tabbar-item>
</van-tabbar>
</demo-block>
</demo-section>
</template>
@ -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}`
});
}
}
};
</script>

32
src/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -154,5 +154,37 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签1</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签2</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签3</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签4</div>
</div>
</div>
</div>
</div>
`;