captain-ui/es/showcase/src/main.js

有赞vue wap业务组件库

var MODE = {
  TWO_COL: '0',
  THREE_COL: '1'
};
var WITHOUT_SPACE = {
  KEEP_SPACE: '0',
  REMOVE_SPACE: '1'
};
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      ref: "showcaseContainer",
      staticClass: "cap-showcase-container"
    }, [_vm.showTitle ? _c('h3', {
      staticClass: "cap-showcase__title"
    }, [_vm._v("\n    " + _vm._s(_vm.title) + "\n  ")]) : _vm._e(), _c('div', {
      staticClass: "cap-showcase__body"
    }, [_c('ul', {
      ref: "imgList",
      staticClass: "cap-showcase__img-list",
      class: _vm.imgListClass
    }, _vm._l(_vm.imgList, function (img, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-showcase__img-wrap"
      }, [_c('a', {
        attrs: {
          "href": _vm.getLinkUrl(img.link_url)
        }
      }, [_c('img', {
        staticClass: "cap-showcase__img",
        attrs: {
          "src": img.image_url
        }
      })])]);
    }), 0), _vm.showBodyTitle ? _c('h4', {
      staticClass: "cap-showcase__body-title"
    }, [_vm._v("\n      " + _vm._s(_vm.bodyTitle) + "\n    ")]) : _vm._e(), _vm.showBodyDesc ? _c('p', {
      staticClass: "cap-showcase__body-desc"
    }, [_vm._v("\n      " + _vm._s(_vm.bodyDesc) + "\n    ")]) : _vm._e()])]);
  },
  name: 'cap-showcase',
  props: {
    mode: {
      type: String,
      default: MODE.TWO_COL
    },
    withoutSpace: {
      type: String,
      default: WITHOUT_SPACE.REMOVE_SPACE
    },
    title: {
      type: String,
      default: ''
    },
    bodyTitle: {
      type: String,
      default: ''
    },
    bodyDesc: {
      type: String,
      default: ''
    },
    imgList: {
      type: Array,
      validator: function validator(value) {
        return value.length === 3;
      }
    }
  },
  computed: {
    showTitle: function showTitle() {
      return this.title !== '';
    },
    showBodyTitle: function showBodyTitle() {
      return this.bodyTitle !== '';
    },
    showBodyDesc: function showBodyDesc() {
      return this.bodyDesc !== '';
    },
    showImgGap: function showImgGap() {
      return this.withoutSpace === WITHOUT_SPACE.KEEP_SPACE;
    },
    imgListClass: function imgListClass() {
      return {
        'cap-showcase__img-list--2col': this.mode === MODE.TWO_COL,
        'cap-showcase__img-list--show-gap': this.showImgGap
      };
    }
  },
  mounted: function mounted() {
    var _this = this;

    // const showcaseContainer = this.$refs.showcaseContainer;
    var imgList = this.$refs.imgList; // 防止多图拼接产生缝隙

    if (this.withoutSpace === WITHOUT_SPACE.REMOVE_SPACE) {
      var imgListWidth = imgList.getBoundingClientRect().width;
      var mod = imgListWidth % 3;
      var newWidth = imgListWidth + (mod === 0 ? 0 : 3 - mod);
      var itemWidth = newWidth / 3;
      var imgs = Array.prototype.slice.call(imgList.querySelectorAll('.cap-showcase__img-wrap'));
      imgList.style.width = newWidth + 'px';
      imgs.forEach(function (img, index) {
        var imgWidth = _this.mode === MODE.TWO_COL && index === 0 ? itemWidth * 2 : itemWidth;
        img.style.width = imgWidth + 'px';

        if (_this.mode === MODE.TWO_COL) {
          img.style.paddingTop = imgWidth + 'px';
        }
      });
    } // 高度取整防止安卓机器上小数高度造成的缝隙
    // showcaseContainer.style.height = Math.floor(showcaseContainer.getBoundingClientRect().height) + 'px';

  },
  methods: {
    getLinkUrl: function getLinkUrl(url) {
      if (!url) return 'javascript:;';
      return url;
    }
  }
};