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

有赞vue wap业务组件库

// 填充：1，留白：2
var IMAGE_STYLE = {
  contain: 2,
  cover: 1
};
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-goods-img",
      style: {
        paddingTop: "" + _vm.paddingTop
      }
    }, [_vm.imageFillContain ? _c('img', {
      directives: [{
        name: "lazy",
        rawName: "v-lazy",
        value: _vm.imgUrl,
        expression: "imgUrl"
      }],
      staticClass: "cap-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-goods-img--cover",
      style: {
        paddingTop: "" + _vm.paddingTop,
        marginTop: "-" + _vm.paddingTop
      },
      attrs: {
        "data-lazy-log": "1",
        "data-lazy-log-id": _vm.goodsId
      }
    })]);
  },
  name: 'cap-goods-img',
  props: {
    imgUrl: String,
    ratio: String,
    fillStyle: Number,
    goodsId: Number
  },
  computed: {
    paddingTop: function paddingTop() {
      var _this$ratio$split = this.ratio.split(','),
          w = _this$ratio$split[0],
          h = _this$ratio$split[1];

      return +h / +w * 100 + '%';
    },
    imageFillContain: function imageFillContain() {
      return this.fillStyle === IMAGE_STYLE.contain;
    }
  }
};