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

[bugfix] Tabbar: info not work when use icon slot (#1705)

Browse Source
This commit is contained in:
neverland 2018-08-27 21:06:18 +08:00 committed by GitHub
parent fe3eb10bd3
commit 30b3fad696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 78 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/badge/index.vue
View File

@ -4,17 +4,22 @@
:href="url"
@click="onClick"
>
<div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
<van-info :info="info" :class="b('info')" />
{{ title }}
</a>
</template>
<script>
import Info from '../info';
import create from '../utils/create';
export default create({
name: 'badge',
components: {
[Info.name]: Info
},
props: {
url: String,
info: [String, Number],

6
packages/badge/test/__snapshots__/demo.spec.js.snap
View File

@ -9,15 +9,15 @@ exports[`renders demo correctly 1`] = `
标签名称
</a>
<a class="van-badge van-hairline">
<div class="van-badge__info">8</div>
<div class="van-info van-badge__info">8</div>
标签名称
</a>
<a class="van-badge van-hairline">
<div class="van-badge__info">99</div>
<div class="van-info van-badge__info">99</div>
标签名称
</a>
<a class="van-badge van-hairline">
<div class="van-badge__info">199</div>
<div class="van-info van-badge__info">199</div>
标签名称
</a>
</div>

2
packages/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
</i> 客服</a>
<a class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<div class="van-icon__info">5</div>
<div class="van-info">5</div>
</i> 购物车</a>
<a class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">

17
packages/icon/config/template.css
View File

@ -14,23 +14,6 @@
font-size: inherit;
text-rendering: auto;
&__info {
color: #fff;
left: 100%;
top: -.5em;
font-size: .5em;
padding: 0 .3em;
text-align: center;
min-width: 1.2em;
line-height: 1.2;
position: absolute;
border-radius: .6em;
box-sizing: border-box;
background-color: $red;
transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}
&::before {
display: inline-block;
}

7
packages/icon/index.vue
View File

@ -1,16 +1,21 @@
<template>
<i :class="[classPrefix, `${classPrefix}-${name}`]" :style="style" v-on="$listeners">
<slot />
<div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
<van-info :info="info" />
</i>
</template>
<script>
import Info from '../info';
import create from '../utils/create-basic';
export default create({
name: 'icon',
components: {
[Info.name]: Info
},
props: {
name: String,
info: [String, Number],

15
packages/info/index.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div v-if="isDef(info)" :class="b()">{{ info }}</div>
</template>
<script>
import create from '../utils/create-basic';
export default create({
name: 'info',
props: {
info: [String, Number]
}
});
</script>

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

@ -2,8 +2,9 @@
<div :class="b({ active })" @click="onClick">
<div :class="b('icon', { dot })">
<slot name="icon" :active="active">
<icon v-if="icon" :name="icon" :info="info" />
<icon v-if="icon" :name="icon" />
</slot>
<van-info :info="info" />
</div>
<div :class="b('text')">
<slot :active="active"/>
@ -12,12 +13,17 @@
</template>
<script>
import Info from '../info';
import create from '../utils/create';
import RouterLink from '../mixins/router-link';
export default create({
name: 'tabbar-item',
components: {
[Info.name]: Info
},
mixins: [RouterLink],
props: {

2
packages/tabbar/demo/index.vue
View File

@ -11,7 +11,7 @@
<demo-block :title="$t('title2')">
<van-tabbar v-model="active2">
<van-tabbar-item icon="shop">
<van-tabbar-item info="3">
<span>{{ $t('custom') }}</span>
<img
slot="icon"

2
packages/tabbar/en-US.md
View File

@ -35,7 +35,7 @@ Use `icon` slot to custom icon
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">
<van-tabbar-item info="3">
<span>Custom</span>
<img
slot="icon"

11
packages/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -9,6 +9,7 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;">
<!---->
</i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
@ -17,22 +18,25 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
<!---->
</i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
<div class="van-icon__info">5</div>
<!---->
</i>
<div class="van-info">5</div>
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;">
<div class="van-icon__info">20</div>
<!---->
</i>
<div class="van-info">20</div>
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
@ -43,6 +47,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png">
<div class="van-info">3</div>
</div>
<div class="van-tabbar-item__text"><span>自定义</span></div>
</div>
@ -51,6 +56,7 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
<!---->
</i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
@ -59,6 +65,7 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
<!---->
</i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>

2
packages/tabbar/zh-CN.md
View File

@ -37,7 +37,7 @@ export default {
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">
<van-tabbar-item info="3">
<span>自定义</span>
<img
slot="icon"

21
packages/vant-css/src/badge.css
View File

@ -41,19 +41,12 @@
}
&__info {
position: absolute;
top: 2px;
right: 2px;
color: $white;
font-size: 10px;
font-weight: normal;
transform: scale(0.8);
text-align: center;
box-sizing: border-box;
padding: 0 6px;
min-width: 18px;
line-height: 18px;
border-radius: 9px;
background-color: $red;
left: auto;
top: 4px;
right: 4px;
font-size: 12px;
min-width: 1.5em;
line-height: 1.5em;
transform: scale(0.7);
}
}

1
packages/vant-css/src/base.css
View File

@ -8,6 +8,7 @@
@import "./common/clearfix.css";
@import "./common/hairline.css";
@import "./common/animation.css";
@import './info.css';
@import './icon.css';
@import './loading.css';
@import './button.css';

17
packages/vant-css/src/icon.css
View File

@ -14,23 +14,6 @@
font-size: inherit;
text-rendering: auto;
&__info {
color: #fff;
left: 100%;
top: -.5em;
font-size: .5em;
padding: 0 .3em;
text-align: center;
min-width: 1.2em;
line-height: 1.2;
position: absolute;
border-radius: .6em;
box-sizing: border-box;
background-color: $red;
transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}
&::before {
display: inline-block;
}

18
packages/vant-css/src/info.css Normal file
View File

@ -0,0 +1,18 @@
@import './common/var.css';
.van-info {
color: #fff;
left: 100%;
top: -.5em;
font-size: .5em;
padding: 0 .3em;
text-align: center;
min-width: 1.2em;
line-height: 1.2;
position: absolute;
border-radius: .6em;
box-sizing: border-box;
background-color: $red;
transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}

3
packages/vant-css/src/tabbar.css
View File

@ -24,8 +24,8 @@
&__icon {
font-size: 18px;
margin-bottom: 5px;
position: relative;
margin-bottom: 5px;
.van-icon {
display: block;
@ -46,6 +46,7 @@
img {
height: 18px;
display: block;
}
}