captain-ui/es/ump-seckill/src/components/goodsImg.js

有赞vue wap业务组件库

import { SIZE, IMAGE_STYLE } from '../constant';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-ump-seckill-goods__img-wrap",
      style: {
        paddingTop: "" + _vm.paddingTop
      }
    }, [_vm.imageFillContain ? _c('img', {
      directives: [{
        name: "lazy",
        rawName: "v-lazy",
        value: _vm.imgUrl,
        expression: "imgUrl"
      }],
      staticClass: "cap-ump-seckill-goods__img--contain",
      attrs: {
        "data-lazy-log": "1",
        "data-lazy-log-id": _vm.goodsId
      }
    }) : _c('div', {
      directives: [{
        name: "lazy",
        rawName: "v-lazy:background-image",
        value: _vm.imgUrl,
        expression: "imgUrl",
        arg: "background-image"
      }],
      staticClass: "cap-ump-seckill-goods__img--cover",
      style: {
        paddingTop: "" + _vm.paddingTop,
        marginTop: "-" + _vm.paddingTop
      },
      attrs: {
        "data-lazy-log": "1",
        "data-lazy-log-id": _vm.goodsId
      }
    }), _vm.showMask ? _c('div', {
      staticClass: "cap-ump-seckill-goods__mask"
    }) : _vm._e()]);
  },
  name: 'cap-ump-seckill-goods-img',
  props: {
    imgUrl: String,
    showMask: Boolean,
    ratio: String,
    size: Number,
    fillStyle: Number,
    goodsId: Number
  },
  computed: {
    paddingTop: function paddingTop() {
      var paddingTop;

      if (this.size !== SIZE.big) {
        paddingTop = '100%';
      } else {
        var _this$ratio$split = this.ratio.split(','),
            w = _this$ratio$split[0],
            h = _this$ratio$split[1];

        paddingTop = +h / +w * 100 + '%';
      }

      return paddingTop;
    },
    imageFillContain: function imageFillContain() {
      return this.fillStyle === IMAGE_STYLE.contain;
    }
  }
};