shu-c-view/packages/bread-crumb/index.js

rollup 打包vue组件库框架

/**
 * @desc 面包屑
 */
import _assign from 'lodash/assign';
import _isNil from 'lodash/isNil';
import _omit from 'lodash/omit';
import _has from 'lodash/has';
import _findLastIndex from 'lodash/findLastIndex';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import { devConsole } from '../helper/util.js';

const BaseBreadCrumb = {
  name: 'BaseBreadCrumb',
  inheritAttrs: false,
  props: {
    // 自定义样式
    ctCls: {
      type: String
    },
    // 子项
    /**
     * @desc 子项
     * @example
     * [
     *   { text: '首页', to: { path: '/user' } },
     *   { text: '活动管理' }
     * ]
     */
    options: {
      type: Array
    }
  },
  methods: {
    /**
     * @desc 创建 el-breadcrumb
     */
    createElBreadcrumb() {
      const vNodes = [];
      let mouseType = _has(this.$listeners, 'bread-click') ? 'pointer' : 'text';
      if (!_isNil(this.options)) {
        for (let i = 0, len = this.options.length; i < len; i += 1) {
          const option = this.options[i];
          if (i === len - 1) {
            mouseType = false;
          }
          vNodes.push(
            this.$createElement(
              'el-breadcrumb-item',
              {
                style: { cursor: mouseType },
                props: _omit(option, ['text']),
                nativeOn: {
                  click: event => {
                    const index = _findLastIndex(
                      this.options,
                      o => o.text === event.target.innerText
                    );
                    if (index !== -1 && index !== this.options.length - 1) {
                      this.$emit('bread-click', option, event);
                    }
                  }
                }
              },
              [option.text]
            )
          );
        }
      }
      return vNodes;
    }
  },
  render(h) {
    return h(
      'el-breadcrumb',
      {
        ref: `${this._uid}-base-bread-crumb`,
        attrs: {
          id: this.$attrs.id
        },
        class: { 'base-bread-crumb': true, [this.ctCls]: this.ctCls },
        props: _assign({}, this.$attrs)
      },
      this.createElBreadcrumb()
    );
  }
};
BaseBreadCrumb.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole('按需加载独立组件：' + BaseBreadCrumb.name);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseBreadCrumb.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseBreadCrumb.name, BaseBreadCrumb);
};
export { BaseBreadCrumb };