vue显示图片的一部分
2021-12-30 本文已影响0人
秀萝卜
这就要使用background:url()了,具体可以看我之前的一篇文章:https://www.jianshu.com/p/337d849077c9
background:url(....)
background-position:xx xx
background-size:xx xx
background-repeat:no-repeat
但是在style中必须写成一个,否则不起作用。
所以使用简写格式:
background:url(...) no-repeat 0 0px / auto 28px
左边的0 0px是图片显示的起始位置,
右边的auto 28px的意思是,图片的高度设为28px,图片宽度根据高度等比缩放。
isHover: -1,
<div class="mydiv" @click="onService" @mouseenter="isHover=1000" @mouseleave="isHover=-1">
<div class="myicon" v-if="'1000'==selectId || isHover=='1000'" :style="{background :'url(~@/../static/images/helpCenter/help_qie.png) no-repeat -37px 0px / auto 28px'}"></div>
<div class="myicon" v-else :style="{background :'url(~@/../static/images/helpCenter/help_qie.png) no-repeat 0 0px / auto 28px'}"></div>
<span class="myspan">在线咨询</span>
</div>
或者
<li class="myli" v-for="(item,index) in leftData" :key="index + '-help'" :class="item.id==selectId ? 'active-li':''">
<div class="mydiv" @mouseenter="isHover=index" @mouseleave="isHover=-1" @click.stop="onType(item)">
<div class="myicon" v-if="item.id==selectId || isHover==index" :style="{background :'url(' + item.icon + ') no-repeat -37px 0px / auto 28px'}"></div>
<div class="myicon" v-else :style="{background :'url(' + item.icon + ') no-repeat 0 0px / auto 28px'}"></div>
<span class="myspan">{{item.name}}</span>
</div>
</li>