captain-ui/es/category/src/components/group.js

有赞vue wap业务组件库

import fullfillImage from '@youzan/utils/fullfillImage';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('ul', {
      staticClass: "cap-category-container__list"
    }, [_vm._l(_vm.categoryList, function (category, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-category-container__item"
      }, [_c('a', {
        staticClass: "cap-category-container__link",
        attrs: {
          "href": category.linkUrl
        }
      }, [_c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: _vm.getCategoryImage(category.imageUrl),
          expression: "getCategoryImage(category.imageUrl)"
        }],
        staticClass: "cap-category-container__img",
        attrs: {
          "data-lazy-log": "1",
          "alt": category.title
        }
      }), _c('span', {
        staticClass: "cap-category-container__title"
      }, [_vm._v(_vm._s(category.title))])])]);
    }), _vm._l(_vm.skeletonNum, function (item, index) {
      return _c('li', {
        key: "skeleton-" + index,
        staticClass: "cap-category-container__item"
      }, [_vm._m(0, true)]);
    })], 2);
  },
  staticRenderFns: [function () {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-category-container__link"
    }, [_c('div', {
      staticClass: "cap-category-container__img"
    }), _c('span', {
      staticClass: "cap-category-container__title"
    })]);
  }],
  name: 'cap-category-group',
  props: {
    categoryList: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  computed: {
    /**
     * 占位符的数量。补够一行
     */
    skeletonNum: function skeletonNum() {
      var num = 3 - this.categoryList.length % 3;
      return num === 3 ? 0 : num;
    }
  },
  methods: {
    getCategoryImage: function getCategoryImage(url) {
      return fullfillImage(url, '!100x0.jpg');
    }
  }
};