shu-c-view/packages/block-group/index.js

rollup 打包vue@2.7组件库框架

/**
 * @desc 按钮组
 */
import _isNil from 'lodash/isNil';
import _has from 'lodash/has';
import _get from 'lodash/get';
import _assign from 'lodash/assign';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import _map from 'lodash/map';
import { devConsole } from '../helper/util.js';

const BaseBlockGroup = {
  name: 'BaseBlockGroup',
  inheritAttrs: false,
  props: {
    // 子项之间的margin边距值
    spaceVal: {
      type: Number
    },
    // 当前激活的菜单项（0 是第一个）
    defaultActive: {
      type: Number,
      default: 0
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#333'
    },
    // 选中文字颜色
    activeTextColor: {
      type: String,
      default: '#fff'
    },
    // 选中的样式
    activeCls: {
      type: String
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: 'rgba(135,126,126,0.6)'
    },
    // 配置项
    buttonGroup: {
      type: Array
    },
    // 自定义样式
    ctCls: {
      type: String
    }
  },
  data() {
    return {
      isActive: this.defaultActive
    };
  },
  watch: {
    // 监听外部 defaultActive 的修改
    defaultActive(val, oldVal) {
      if (val !== oldVal) {
        this.isActive = val;
        setTimeout(() => {
          this.handleDefaultClick();
        }, 0);
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.handleDefaultClick();
    }, 0);
  },
  methods: {
    /**
     * @desc 默认执行 click
     */
    handleDefaultClick() {
      const aChildrenList = _get(
        this.$refs['base-button-group'],
        'children',
        []
      );
      if (aChildrenList.length > this.isActive) {
        !_isNil(aChildrenList[this.isActive]) &&
          aChildrenList[this.isActive].click();
      }
    },
    /**
     * @desc 获取 html 节点对象
     */
    getEl() {
      return this.$refs['base-button-group'];
    },
    /**
     * @desc 创建 el-dropdown-item
     */
    createItem() {
      let vNodes = [];
      const h = this.$createElement;
      if (!_isNil(this.buttonGroup)) {
        vNodes = _map(this.buttonGroup, (option, i) => {
          let icon = null;
          if (_has(option, 'icon')) {
            icon = h('i', {
              class: option.icon || option.iconUrl
            });
          }
          const styleCls = {};
          if (this.backgroundColor && this.isActive !== i) {
            styleCls.backgroundColor = this.backgroundColor;
          }
          if (this.spaceVal) {
            styleCls.marginRight = `${this.spaceVal}px`;
            styleCls.marginBottom = `${this.spaceVal}px`;
          }
          const vNode = h(
            'li',
            {
              style: styleCls,
              class: {
                [this.activeCls]: this.activeCls && this.isActive === i,
                [this.nodeCls]: !!this.nodeCls
              },
              on: {
                click: event => {
                  if (this.isActive !== i) {
                    this.isActive = i; // 设置选中项
                    this.$emit('update:defaultActive', this.isActive);
                  }
                  if (_has(this.$listeners, 'click')) {
                    this.$listeners.click(event, _assign({}, option), i);
                  }
                }
              },
              key: _get(option, 'code', i)
            },
            [
              icon,
              h(
                'span',
                {
                  style: {
                    color:
                      this.isActive === i
                        ? this.activeTextColor
                        : this.textColor
                  }
                },
                option.text
              )
            ]
          );
          return vNode;
        });
      }
      return vNodes;
    }
  },
  render(h) {
    const styleCls = {};
    if (this.spaceVal) {
      styleCls.marginRight = `${-this.spaceVal}px`;
      styleCls.marginBottom = `${-this.spaceVal}px`;
    }
    return h(
      'ul',
      {
        ref: 'base-button-group',
        attrs: { id: this.$attrs.id },
        style: styleCls,
        class: { 'base-button-group': true, [this.ctCls]: this.ctCls }
      },
      this.createItem()
    );
  }
};
BaseBlockGroup.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseBlockGroup.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i += 1) {
      if (ElComponents[i].name !== BaseBlockGroup.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseBlockGroup.name, BaseBlockGroup);
};
export { BaseBlockGroup };