blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] TabbarItem: add slot-scope to avoid check by index (#347)

Browse Source 
* [improvement] TabbarItem: add slot-scope to avoid check by index

* [fix] TabbarItem: fix slot-scope on <template> to support vue v2.1.0+
This commit is contained in:
Li Chuangbo 2017-11-24 16:10:32 +13:00 committed by neverland
parent 1f1632a7eb
commit f7bd71969d
4 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/demos/views/tabbar.vue
View File

@ -13,7 +13,9 @@
<van-tabbar v-model="active2">
<van-tabbar-item icon="shop">
<span>{{ $t('custom') }}</span>
<img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
<template slot="icon" slot-scope="props">
<img :src="props.active ? icon.active : icon.normal" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>

10
docs/markdown/en-US/tabbar.md
View File

@ -38,7 +38,9 @@ Use `icon` slot to custom icon
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">
<span>Custom</span>
<img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
<template slot="icon" slot-scope="props">
<img :src="props.active ? icon.active : icon.normal" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="chat">Tab</van-tabbar-item>
<van-tabbar-item icon="records">Tab</van-tabbar-item>
@ -81,3 +83,9 @@ export default {
| url | Link | `String` | - | - |
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
| replace | If true, the navigation will not leave a history record | `String` | `false` | - |
### TabbarItem Slot
| Name | Description | Scope |
|-----------|-----------|-----------|
| icon | Custom icon | active |

10
docs/markdown/zh-CN/tabbar.md
View File

@ -41,7 +41,9 @@ export default {
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">
<span>自定义</span>
<img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
<template slot="icon" slot-scope="props">
<img :src="props.active ? icon.active : icon.normal" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="chat">标签</van-tabbar-item>
<van-tabbar-item icon="records">标签</van-tabbar-item>
@ -85,3 +87,9 @@ export default {
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
### TabbarItem Slot
| Name | 描述 | Scope |
|-----------|-----------|-----------|
| icon | 自定义icon | active |

4
packages/tabbar-item/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick">
<div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
<slot name="icon">
<slot name="icon" :active="active">
<van-icon v-if="icon" :name="icon" />
</slot>
<div v-if="info" class="van-tabbar-item__info">{{ info }}</div>
</div>
<div class="van-tabbar-item__text">
<slot></slot>
<slot :active="active"></slot>
</div>
</div>
</template>