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

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _antDesignVue = require('ant-design-vue');

var _resizeObserver = require('./resizeObserver');

var _resizeObserver2 = _interopRequireDefault(_resizeObserver);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var DCardLayout = {
  name: 'DCardLayout',
  props: {
    // ...defaultProps,
    prefixCls: _vueTypes2['default'].string.def('depot-layout-card'),
    bodyStyle: _vueTypes2['default'].object.def({}),
    gutter: _vueTypes2['default'].number.def(16),
    type: _vueTypes2['default'].string.def('default')
  },
  data: function data() {
    return {
      onRef: null,
      resizeObserver: (0, _resizeObserver2['default'])(),
      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': (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefixCls, 1)),
      ref: 'cardLayout'
    };
    var children = (0, _propsUtil.filterEmpty)($slots['default']);
    // console.log(this.$props);
    // console.log(children);
    var classString2 = (_classString = {}, (0, _defineProperty3['default'])(_classString, '' + className, type === 'predefined' ? 1 : 0), (0, _defineProperty3['default'])(_classString, prefixCls + '-inner-grid', type === 'predefined' ? 1 : 0), (0, _defineProperty3['default'])(_classString, prefixCls + '-inner-flex', type === 'flex' ? 1 : 0), (0, _defineProperty3['default'])(_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': (0, _classnames2['default'])((_cx2 = {}, (0, _defineProperty3['default'])(_cx2, prefixCls + '-grid', type !== 'flex' && type !== 'special' ? 1 : 0), (0, _defineProperty3['default'])(_cx2, prefixCls + '-workdashboard', type === 'special' ? 1 : 0), (0, _defineProperty3['default'])(_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]
    );
  }
};
// import defaultProps from './defaultProps';


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

exports['default'] = DCardLayout;