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

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";

/*
 * 魔方组件
 * 1. 行为空时必须提供空的tr和td，否则iOS显示会有bug
 * 2. td使用百分比控制宽高，用px会导致chrome系列某些情况布局错误
 * 3. 可传入borderWidth控制间隙
 * 4. 可传入customHeight自定义魔方高度，解除高度和屏幕宽度及行数的关联
 */
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      ref: "cubeWrap",
      staticClass: "cap-cube-wrap"
    }, [_c('div', {
      ref: "cubeTable",
      staticClass: "cap-cube",
      style: {
        margin: "-" + _vm.borderWidth / 2 + "px"
      }
    }, _vm._l(_vm.imageList, function (item, i) {
      return _c('div', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy:background-image",
          value: item.url,
          expression: "item.url",
          arg: "background-image"
        }],
        key: i,
        staticClass: "cap-cube__item",
        style: {
          left: item.left + "px",
          top: item.top + "px",
          height: _vm.isCustom ? _vm.cubeHeight - _vm.borderWidth + "px" : item.height + "px",
          width: item.width + "px",
          margin: _vm.borderWidth / 2 + "px"
        },
        attrs: {
          "colspan": item.width,
          "rowspan": item.height
        }
      }, [_c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.url,
          expression: "item.url"
        }],
        staticClass: "cap-cube__table-image--invisible",
        on: {
          "click": function click($event) {
            _vm.redirect(item.link);
          }
        }
      })]);
    }), 0)]);
  },
  name: 'cap-cube',
  props: {
    items: Array,
    width: Number,
    height: Number,
    isCustom: Boolean,
    borderWidth: {
      default: 0,
      type: Number
    }
  },
  data: function data() {
    return {
      blockWidth: 0,
      cubeHeight: 0
    };
  },
  computed: {
    imageList: function imageList() {
      var _this = this;

      return this.items.map(function (item) {
        return _extends({}, item, {
          height: _this.blockWidth * item.height - _this.borderWidth,
          width: _this.blockWidth * item.width - _this.borderWidth,
          left: _this.blockWidth * item.x,
          top: _this.blockWidth * item.y
        });
      });
    }
  },
  beforeUpdate: function beforeUpdate() {
    this.initCubeSize();
  },
  mounted: function mounted() {
    this.initCubeSize();
  },
  methods: {
    redirect: function redirect(url) {
      if (url) {
        window.location.href = url;
      }
    },
    initCubeSize: function initCubeSize() {
      var cubeWrap = this.$el;
      var cubeTable = this.$refs.cubeTable;
      var cubeTableWidth = cubeWrap.getBoundingClientRect().width + this.borderWidth;
      var mod = cubeTableWidth % this.width;
      var newCubeTableWidth = cubeTableWidth + (mod === 0 ? 0 : this.width - mod);
      var first = this.items[0] || {};
      this.blockWidth = newCubeTableWidth / this.width;
      cubeTable.style.width = newCubeTableWidth + "px";
      this.cubeHeight = this.isCustom && first.image_width && first.image_height ? first.image_height / first.image_width * (this.blockWidth - this.borderWidth) + this.borderWidth : this.blockWidth * this.height;
      cubeTable.style.height = this.cubeHeight + "px";
    }
  }
};