hotfix:修复tabbar-item图标使用solt无法显示info的问题 (#779)

This commit is contained in:
fkq 2018-10-18 21:09:26 -05:00 committed by neverland
parent 6c2e06b2ea
commit 6fbd9c7030
5 changed files with 1116 additions and 13 deletions

View File

@ -3,13 +3,16 @@
bind:tap="onClick"
>
<view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">
<block wx:if="{{ active }}">
<slot name="icon-active" />
</block>
<block wx:else>
<slot name="icon" />
</block>
<van-icon wx:if="{{ icon }}" name="{{ icon }}" info="{{ info }}" />
<block wx:else>
<block wx:if="{{ active }}">
<slot name="icon-active" />
</block>
<block wx:else>
<slot name="icon" />
</block>
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
</block>
</view>
<view class="van-tabbar-item__text">
<slot />

View File

@ -1 +1 @@
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-tabbar-item{color:#666;height:100%;display:-webkit-flex;display:flex;line-height:1;font-size:12px;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.van-tabbar-item__icon{font-size:18px;margin-bottom:5px;position:relative}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon--dot::after{top:0;right:-8px;width:8px;height:8px;content:' ';position:absolute;border-radius:100%;background-color:#f44}.van-tabbar-item__icon image{width:50px;height:18px}.van-tabbar-item--active{color:#38f}
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-tabbar-item{color:#666;height:100%;display:-webkit-flex;display:flex;line-height:1;font-size:12px;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.van-tabbar-item__icon{font-size:18px;margin-bottom:5px;position:relative}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon .van-icon__info{color:#fff;left:100%;top:-.5em;font-size:.6em;padding:0 .25em;text-align:center;min-width:1.4em;line-height:1.4;position:absolute;border-radius:.6em;box-sizing:border-box;background-color:#f44;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif}.van-tabbar-item__icon--dot::after{top:0;right:-8px;width:8px;height:8px;content:' ';position:absolute;border-radius:100%;background-color:#f44}.van-tabbar-item__icon image{width:50px;height:18px}.van-tabbar-item--active{color:#38f}

View File

@ -21,6 +21,23 @@
.van-icon {
display: block;
&__info {
color: #fff;
left: 100%;
top: -.5em;
font-size: .6em;
padding: 0 .25em;
text-align: center;
min-width: 1.4em;
line-height: 1.4;
position: absolute;
border-radius: .6em;
box-sizing: border-box;
background-color: @red;
transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}
}
&--dot {

View File

@ -3,13 +3,16 @@
bind:tap="onClick"
>
<view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">
<block wx:if="{{ active }}">
<slot name="icon-active" />
</block>
<block wx:else>
<slot name="icon" />
</block>
<van-icon wx:if="{{ icon }}" name="{{ icon }}" info="{{ info }}" />
<block wx:else>
<block wx:if="{{ active }}">
<slot name="icon-active" />
</block>
<block wx:else>
<slot name="icon" />
</block>
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
</block>
</view>
<view class="van-tabbar-item__text">
<slot />

1080
yarn.lock

File diff suppressed because it is too large Load Diff