shu-c-view/packages/absolute-layout/index.js

rollup 打包vue@2.7组件库框架

/**
 * @desc Absolute布局
 */
import _get from 'lodash/get';
import _set from 'lodash/set';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import { devConsole } from '../helper/util.js';

const BaseAbsoluteLayout = {
  name: 'BaseAbsoluteLayout',
  props: {
    // 一个可选添加的CSS样式类，加入到组件的容器上
    extraCls: {
      type: String
    }
  },
  methods: {
    createNodes() {
      const childSlots = this.$slots.default;
      const h = this.$createElement;
      const nodes = [];
      for (let i = 0, len = childSlots.length; i < len; i += 1) {
        const oAttrs = _get(childSlots[i], 'data.attrs', {});
        const x = _get(oAttrs, 'x', 0);
        const y = _get(oAttrs, 'y', 0);
        delete oAttrs.x;
        delete oAttrs.y;
        nodes.push(
          h(
            {
              render() {
                return this.$scopedSlots.default();
              }
            },
            {
              style: {
                position: 'absolute',
                top: `${y}px`,
                left: `${x}px`
              },
              scopedSlots: { default: () => childSlots[i] }
            },
            []
          )
        );
      }
      return nodes;
    }
  },
  render(h) {
    const style = {};
    const oClassObj = { 'base-absolute-layout_wrapper': true };
    if (this.extraCls) {
      _set(oClassObj, this.extraCls, true);
    }
    return h('div', { class: oClassObj, style }, this.createNodes());
  }
};
BaseAbsoluteLayout.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseAbsoluteLayout.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i += 1) {
      if (ElComponents[i].name !== BaseAbsoluteLayout.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseAbsoluteLayout.name, BaseAbsoluteLayout);
};
export { BaseAbsoluteLayout };