mixin.styl:
bg-image($url)//默认2x图,dpr为3则使用3x图
background-image: url($url+"@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3)
background-image: url($url+"@3x.png")
header.vue:
<template>
<div v-if="seller.supports" class="supports">//异步请求,需要判断数据是否传递到。否则报错undefined
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</template>
<script type='text/ecmascript-6'>
export default {
props: {
seller: {
type: Object
}
},
created () {//created钩子函数,用于组件实例创建完成,属性已经绑定,但是DO还未生成,$el属性还不存在时。给classMap数组赋值,根据数组下标不同来显示不同的class,从而显示不同的图标。
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']//classmap数组实现数组下标值与活动类型的一一映射
}
</script>
<style lang='stylus'>
@import '../../common/stylus/mixin.styl'//使用前需要导入。
.supports
margin-bottom: 2px
.icon
display: inline-block
vertical-align: top
width: 12px
height: 12px
background-size: 12px 12px
background-repeat: no-repeat
&.decrease
bg-image('decrease_1')
&.discount
bg-image('discount_1')
&.guarantee
bg-image('guarantee_1')
&.invoice
bg-image('invoice_1')
&.special
bg-image('special_1')
.text
line-height: 12px
font-size: 10px
margin-left: 4px
background-color: rgba(0, 0, 0, 0.2)