在Vue中span标签的背景图是根据后台返回的数据动态显示的图片

阳光穿透心脏的1/2处 2022-05-26 11:10 126阅读 0赞

在Vue中span标签的背景图是根据后台返回的数据动态显示的图片，如下图中的的红圈是根据后台返回的数据动态显示的图片，对应的HTML是.icon元素

![20180430213124400][]

实现元素的背景图的动态显示的具体操作如下

1）根据后台返回的数据，在该组件的.vue文件中的<script>中的输出对象中使用生命周期钩子created()，在里面定义mapClass数组对象，里面元素的值一一对应后台返回的数据，例如后台返回的数据如下所示：

{
      "seller": {
        "name": "粥品香坊（回龙观）",
        "description": "蜂鸟专送",
        "deliveryTime": 38,
        "score": 4.2,
        "serviceScore": 4.1,
        "foodScore": 4.3,
        "rankRate": 69.2,
        "minPrice": 20,
        "deliveryPrice": 4,
        "ratingCount": 24,
        "sellCount": 90,
        "bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
        "supports": [
          {
            "type": 0,
            "description": "在线支付满28减5"
          },
          {
            "type": 1,
            "description": "VC无限橙果汁全场8折"
          },
          {
            "type": 2,
            "description": "单人精彩套餐"
          },
          {
            "type": 3,
            "description": "该商家支持发票,请下单写好发票抬头"
          },
          {
            "type": 4,
            "description": "已加入“外卖保”计划,食品安全保障"
          }
        ]
      }
    }

.icon元素中的背景图对应数据中的supports对象中的type的类型，type---0,1,2,3,4一一对应decrease，discount，special，invoice，guarantee，也就是要显示的图片的名字，其中图片素材如下所示，这就是要在.icon中显示的背景的图片

![2018043021425383][]

classMap的定义如下所示：

2）在组件的html标签中引用自定义属性classMap，如下所示：

<div class="support" v-if="seller.supports">
        <span class="icon" :class="classMap[seller.supports[0].type]"></span>
        <span class="text">{
       {seller.supports[0].description}}</span>
    </div>

seller.supports\[0\].type是后台返回的数据，对照1）中后台返回的supports数组中的第一个元素的type:0，classMap\[0\]对应的是decrease

3）在组件的<style>标签中给.icon元素定义不同背景

.icon
        display: inline-block
        width:12px
        height:12px
        margin-right :4px
        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-special('special_1')

其中bg-image()方法是用stylus的mixin特性封装的一个方法，作用是根据不同的设备像素比引用不同的图片，其在mixin.styl文件中的定义如下：根据不同的设备像素比来设置background-image的url，$url是传进来的图片名，然后跟后面的字符串拼接成完整的图片名

bg-image($url)
      background-image :url($url+'@2x.png')
      @media (-webkit-min-device-pixel-ratio:3),(device-pixel-ratio:3)
        background-image :url($url+'@3x.png')

![20180430220138501][]

通过以上的设置，就可以根据后台返回的数据，动态的显示icon元素的背景图了

[20180430213124400]: /images/20220526/a0f66a18944a466d9ff8538a9b66563d.png
[2018043021425383]: /images/20220526/44236ba662cd4bea948c6019feac9825.png
[20180430220138501]: /images/20220526/b42987f8912743a39f8b9ed5f75aa4f3.png