shu-c-view/packages/select-popover/index.js

rollup 打包vue组件库框架

// 下拉选择面板，没有input框
import _isEmpty from 'lodash/isEmpty';
import _isArray from 'lodash/isArray';
import _get from 'lodash/get';
import _has from 'lodash/has';
import _isNaN from 'lodash/isNaN';
import _isNil from 'lodash/isNil';
import _findIndex from 'lodash/findIndex';
import { devConsole } from '../helper/util.js';

const BaseSelectPopover = {
  name: 'BaseSelectPopover',
  inheritAttrs: false,
  model: {
    prop: 'actives',
    event: 'input'
  },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 默认选中项，v-model
    actives: {
      type: [Array, String, Number],
      default() {
        return [];
      }
    },
    // 数据
    dataList: {
      type: Array,
      default() {
        return [
          /* { name: '凤凰行动', id: 1 },
          { name: '高新技术企业', id: 2 },
          { name: '瞪羚企业', id: 3 } */
        ];
      }
    },
    displayField: {
      type: String,
      default: 'name'
    },
    valueField: {
      type: String,
      default: 'code'
    },
    // 多选-默认单选
    multiple: {
      type: Boolean,
      default: false
    },
    ctCls: {
      type: String
    },
    // 为 popper 添加类名
    popperClass: {
      type: String,
      default: ''
    },
    // 下拉悬浮框宽度
    width: {
      type: Number,
      default: 150
    },
    // 触发方式
    trigger: {
      type: String,
      default: 'hover',
      validator: function(value) {
        return ['hover', 'click'].indexOf(value) !== -1;
      }
    },
    // 出现位置
    placement: {
      type: String,
      default: 'bottom'
    },
    // 是否关闭默认的选中效果
    isCancelDefaultActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      curActives: this.actives,
      popoverValue: false // 状态是否可见
    };
  },
  watch: {
    actives(val) {
      this.curActives = val;
    }
  },
  methods: {
    onClick(e) {
      const nodeName = e.target.nodeName;
      if (nodeName === 'DIV') {
        const divId = e.target.dataset.id;
        if (_isNaN(divId) || _isNil(divId)) {
          return;
        }
        if (!this.multiple) {
          // 单选
          this.curActives = [];
        }
        if (!this.curActives.includes(divId)) {
          this.curActives.push(divId);
        } else {
          const activeIndex = _findIndex(
            this.curActives,
            item => item === divId
          );
          if (activeIndex !== -1) {
            this.curActives.splice(activeIndex, 1);
          }
        }
        this.$emit('input', this.curActives);
      }
      if (!this.multiple) {
        this.popoverValue = false; // 单选点击后隐藏下拉面板
      }
    },
    createItemElement() {
      return [];
    }
  },
  render(h) {
    const aListEl = [];
    for (var i = 0, len = this.dataList.length; i < len; i++) {
      const data = this.dataList[i];
      if (!_has(data, this.displayField) || !_has(data, this.valueField)) {
        continue;
      }
      let activeEl = h();
      if (
        this.curActives.includes(_get(data, this.valueField)) &&
        !this.isCancelDefaultActive
      ) {
        activeEl = h('i', { class: 'el-icon-check' }, []); // 选中效果
      }
      const row = h(
        'div',
        {
          attrs: { 'data-id': _get(data, this.valueField) },
          class: {
            'xl-label': true,
            active: this.curActives.includes(_get(data, this.valueField))
          }
        },
        [_get(data, this.displayField), activeEl]
      );
      aListEl.push(row);
    }
    return h(
      'div',
      {
        class: {
          'base-select-popover': true,
          [this.ctCls]: !_isNil(this.ctCls)
        }
      },
      [
        h(
          'el-popover',
          {
            props: {
              placement: this.placement,
              width: this.width,
              trigger: this.trigger,
              value: this.popoverValue,
              popperClass: `base-select-popover_popover ${this.popperClass}`
            },
            on: {
              input: val => {
                this.popoverValue = val;
              }
            }
          },
          [
            h('template', { slot: 'default' }, [
              h('div', { on: { click: this.onClick } }, aListEl)
            ]),
            h('template', { slot: 'reference' }, [
              h('div', {}, [
                this.title,
                h('i', { class: 'el-icon-arrow-down' }, [])
              ])
            ])
          ]
        )
      ]
    );
  }
};

BaseSelectPopover.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole('按需加载独立组件：' + BaseSelectPopover.name);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseSelectPopover.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseSelectPopover.name, BaseSelectPopover);
};
export { BaseSelectPopover };