shu-c-view/packages/drop-down/index.js

rollup 打包vue组件库框架

/**
 * @desc Dropdown 下拉菜单
 */
import _assign from 'lodash/assign';
import _isNil from 'lodash/isNil';
import _omit from 'lodash/omit';
import _get from 'lodash/get';
import _has from 'lodash/has';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import { devConsole } from '../helper/util.js';

const BaseDropDown = {
  name: 'BaseDropDown',
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String
    },
    options: {
      type: Array
    },
    cls: {
      type: String
    },
    // 自定义样式
    ctCls: {
      type: String
    },
    // 子项的样式 `el-dropdown-item`
    itemCtCls: {
      type: String
    },
    // 点击生成的悬浮面板样式名称
    dropdownMenuCls: {
      type: String
    }
  },
  methods: {
    /**
     * @desc 获取原生节点对象
     */
    getEl() {
      return this.$refs[`${this._uid}-base-drop-down`];
    },
    /**
     * @desc 手动隐藏下拉菜单
     */
    hide() {
      this.$refs[`${this._uid}-base-drop-down`].hide();
    },
    /**
     * @description 创建子项下拉框
     * @param { Object } data 下拉框的子项
     */
    createChildrenDropdown(data) {
      const list = data.children;
      const h = this.$createElement;

      return h(
        'el-dropdown',
        {
          props: {
            placement: 'right-start'
          },
          class: {
            'subset-dropdown': true
          }
        },
        [
          h(
            'div',
            { class: { 'el-dropdown-link': true, 'link-content': true } },
            [
              h('span', { class: { 'link-text': true } }, [data.text]),
              h(
                'i',
                {
                  class: {
                    'el-icon-arrow-right': true,
                    'link-icon': true
                  }
                },
                []
              )
            ]
          ),
          h(
            'el-dropdown-menu',
            {
              slot: 'dropdown',
              class: { [this.dropdownMenuCls]: this.dropdownMenuCls }
            },
            [
              list.map(item => {
                return h(
                  'el-dropdown-item',
                  {
                    class: { [this.itemCtCls]: this.itemCtCls },
                    props: _omit(item, ['text', 'listeners']),
                    nativeOn: _get(item, 'listeners', {})
                  },
                  [
                    item.children && item.children.length
                      ? this.createChildrenDropdown(item)
                      : item.text
                  ]
                );
              })
            ]
          )
        ]
      );
    },
    /**
     * @description 刷新组件
     */
    updateDropdown() {
      this.$forceUpdate();
    },
    /**
     * @desc 创建 el-dropdown-item
     * @param { Array } data子项的数组
     */
    createElDropdownItem(data) {
      const vNodes = [];
      if (!_isNil(this.options)) {
        for (let i = 0, len = this.options.length; i < len; i++) {
          const option = this.options[i];
          let vNode = {};

          if (_has(this.$scopedSlots, 'default')) {
            vNode = this.$scopedSlots.default(option);
            vNodes.push(vNode);
            continue;
          }

          // 如果有子项的话添加子节点
          if (option.children && option.children.length > 0) {
            vNode = this.$createElement('el-dropdown-item', {}, [
              this.createChildrenDropdown(option)
            ]);

            vNodes.push(vNode);
            continue;
          }

          vNode = this.$createElement(
            'el-dropdown-item',
            {
              class: { [this.itemCtCls]: this.itemCtCls },
              props: _omit(option, ['text', 'listeners']),
              nativeOn: _get(option, 'listeners', {})
            },
            [
              _has(option, 'render')
                ? option.render.call(this.$parent, this.$createElement)
                : option.text
            ]
          );

          vNodes.push(vNode);
        }

        if (_has(this.$slots, 'footer')) {
          vNodes.push(this.$slots.footer);
        }
      }

      return vNodes;
    }
  },
  render(h) {
    if (this.options.length === 0) {
      return _has(this.$slots, 'title')
        ? this.$slots.title
        : h('span', { class: { [this.cls]: this.cls } }, [this.title]);
    } else {
      return h(
        'el-dropdown',
        {
          ref: `${this._uid}-base-drop-down`,
          attrs: {
            id: this.$attrs.id
          },
          class: { 'base-drop-down': true, [this.cls]: this.cls },
          props: _assign({}, this.$attrs),
          on: this.$listeners
        },
        [
          h(
            'span',
            {
              class: { 'el-dropdown-link': true, [this.ctCls]: this.ctCls }
            },
            [
              _has(this.$slots, 'title') ? this.$slots.title : this.title,
              h('i', {
                class: _isNil(this.icon) ? 'el-icon-caret-bottom' : this.icon
              })
            ]
          ),
          h(
            'el-dropdown-menu',
            {
              slot: 'dropdown',
              class: {
                'base-dropdown-menu': true,
                [this.dropdownMenuCls]: this.dropdownMenuCls
              }
            },
            this.createElDropdownItem()
          )
        ]
      );
    }
  }
};
BaseDropDown.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole('按需加载独立组件：' + BaseDropDown.name);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseDropDown.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseDropDown.name, BaseDropDown);
};
export { BaseDropDown };