shu-c-view/packages/h-box-layout/index.js

rollup 打包vue@2.7组件库框架

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

const BaseHBoxLayout = {
  name: 'BaseHBoxLayout',
  props: {
    // 指示组件在容器内的对齐方式
    align: {
      type: String,
      default: 'top',
      validator(value) {
        // stretch 拉伸
        return ['top', 'middle', 'stretch'].indexOf(value) !== -1;
      }
    },
    // 指示组件在容器的位置
    pack: {
      type: String,
      default: 'start',
      validator(value) {
        // start（默认）：组件在容器上边 、center：组件在容器中间、end：组件在容器的下边
        return ['start', 'center', 'end'].indexOf(value) !== -1;
      }
    },
    // 应用于由此布局管理的容器的子项
    flex: {
      type: Number
    },
    // 内边距
    padding: {
      type: String,
      default: '10px'
    },
    // 内部各个元素之间的 margin
    space: {
      type: String,
      default: '0'
    },
    // 一个可选添加的CSS样式类，加入到组件的容器上
    extraCls: {
      type: String
    }
  },
  data() {
    // 对应 flex 布局的 align-self 属性
    this.flexAlign = {
      top: 'flex-start',
      middle: 'center',
      stretch: 'stretch'
    };
    // 对应 flex 布局的 align-items 属性
    this.flexPack = {
      start: 'flex-start',
      center: 'center',
      end: 'flex-end'
    };
    return {};
  },
  methods: {
    /**
     * @desc 创建第一层子节点
     */
    createNodes() {
      const childSlots = this.$slots.default;
      for (let i = 0, len = childSlots.length; i < len; i++) {
        const { data } = childSlots[i];
        if (!_has(data, 'staticStyle')) {
          // data.staticStyle = {};
          _set(data, 'staticStyle', {});
        }
        if (_has(data, 'attrs.flex')) {
          _set(data, 'staticStyle.flex-grow', _get(data, 'attrs.flex'));
          delete data.attrs.flex;
        }
        if (_has(data, 'attrs.align')) {
          _set(
            data,
            'staticStyle.align-self',
            _get(this.flexAlign, _get(data, 'attrs.align'))
          );
          delete data.attrs.align;
        } else {
          _set(
            data,
            'staticStyle.align-self',
            _get(this.flexAlign, this.align)
          );
        }
        // if (_has(data, 'attrs.height')) {
        //   _set(data, 'staticStyle.height', `${_get(data, 'attrs.height')}px`);
        //   delete data.attrs.height;
        // }
        if (i !== len - 1) {
          // data.staticStyle.marginRight = this.space;
          _set(data, 'staticStyle.marginRight', this.space);
        }
      }
      return this.$slots.default;
    }
  },
  render(h) {
    const style = {
      padding: this.padding,
      'justify-content': _get(this.flexPack, this.pack)
    };
    const oClassObj = { 'base-h-box_wrapper': true };
    if (this.extraCls) {
      _set(oClassObj, this.extraCls, true);
    }
    return h('div', { class: oClassObj, style }, this.createNodes());
  }
};
BaseHBoxLayout.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseHBoxLayout.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseHBoxLayout.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseHBoxLayout.name, BaseHBoxLayout);
};
export { BaseHBoxLayout };