vue-ant-patterns/es/d-card-layout/index.js

vue-ant-patterns

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import cx from 'classnames';
import { filterEmpty } from 'ant-design-vue/es/_util/props-util';
import { Grid } from 'ant-design-vue';
// import defaultProps from './defaultProps';
import resizeObserver from './resizeObserver';
var DCardLayout = {
  name: 'DCardLayout',
  props: {
    // ...defaultProps,
    prefixCls: PropTypes.string.def('depot-layout-card'),
    bodyStyle: PropTypes.object.def({}),
    gutter: PropTypes.number.def(16),
    type: PropTypes.string.def('default')
  },
  data: function data() {
    return {
      onRef: null,
      resizeObserver: resizeObserver(),
      className: ''
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.onRef = this.$refs.cardLayout;
    var type = this.type;

    if (type === 'predefined') {
      this.$nextTick(function () {
        // dom对象发生变化后的操作逻辑赋值给dom对象
        _this.onRef.handleResize = _this.handleResize;
        // 观察的对象
        _this.resizeObserver.observe(_this.onRef);
      });
    }
  },

  methods: {
    handleResize: function handleResize(contentRect, ele) {
      var prefixCls = this.prefixCls,
          type = this.type;

      var cardLayoutWidth = contentRect.width; // form的宽度
      var className = '';
      if (cardLayoutWidth < 768) {
        className = prefixCls + '-inner-col-sm';
      } else if (cardLayoutWidth >= 768 && cardLayoutWidth <= 1017) {
        className = prefixCls + '-inner-col-md';
      } else if (cardLayoutWidth >= 1018 && cardLayoutWidth <= 1439) {
        className = prefixCls + '-inner-col-lg';
      } else if (cardLayoutWidth >= 1440 && cardLayoutWidth <= 2219) {
        className = prefixCls + '-inner-col-xl';
      } else if (cardLayoutWidth >= 2220) {
        className = prefixCls + '-inner-col-xxl';
      }
      // console.log('szie---', contentRect, className);
      this.className = className;
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.unobserve(this.onRef);
    }
  },
  render: function render() {
    var _classString, _cx2;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        $slots = this.$slots,
        gutter = this.gutter,
        type = this.type,
        className = this.className;

    var wrapProps = {
      'class': cx(_defineProperty({}, prefixCls, 1)),
      ref: 'cardLayout'
    };
    var children = filterEmpty($slots['default']);
    // console.log(this.$props);
    // console.log(children);
    var classString2 = (_classString = {}, _defineProperty(_classString, '' + className, type === 'predefined' ? 1 : 0), _defineProperty(_classString, prefixCls + '-inner-grid', type === 'predefined' ? 1 : 0), _defineProperty(_classString, prefixCls + '-inner-flex', type === 'flex' ? 1 : 0), _defineProperty(_classString, prefixCls + '-inner-workdashboard', type === 'special' ? 1 : 0), _classString);

    var card = children.map(function (item) {
      return h(
        'a-col',
        { 'class': classString2 },
        [item]
      );
    });

    var rowProps = {
      'class': cx((_cx2 = {}, _defineProperty(_cx2, prefixCls + '-grid', type !== 'flex' && type !== 'special' ? 1 : 0), _defineProperty(_cx2, prefixCls + '-workdashboard', type === 'special' ? 1 : 0), _defineProperty(_cx2, prefixCls + '-default', type === 'default' ? 1 : 0), _cx2)),
      props: {
        gutter: type === 'flex' ? 0 : type === 'special' ? 8 : gutter ? gutter : 24,
        type: type === 'flex' ? 'flex' : null
      }
    };
    // console.log(rowProps);

    return h(
      'div',
      wrapProps,
      [type === 'default' ? $slots['default'] : children && children.length ? h(
        'a-row',
        rowProps,
        [card]
      ) : null]
    );
  }
};

DCardLayout.install = function (Vue) {
  Vue.component(DCardLayout.name, DCardLayout);
};

export default DCardLayout;