shu-c-view/packages/base-switch-button/index.js

rollup 打包vue组件库框架

/**
 * @desc SwitchButton 开关
 */
import _isEqual from 'lodash/isEqual';
import _find from 'lodash/find';
import _set from 'lodash/set';
import _assign from 'lodash/assign';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import { devConsole } from '../helper/util.js';
import YRadioBtn from './radio-btn.vue';
import YRadioGroup from './radio-group.vue';

const BaseSwitchButton = {
  inheritAttrs: false,
  name: 'BaseSwitchButton',
  components: {
    YRadioBtn,
    YRadioGroup
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    options: {
      // 配置项
      type: Array
    },

    displayName: {
      // 页面展示值
      type: String,
      default: 'name'
    },
    displayValue: {
      // 实际值
      type: String,
      default: 'value'
    },
    groupCls: {
      // group样式
      type: String
    },
    // v-if
    isRender: {
      type: Boolean,
      default: true
    },
    // v-show
    isDisplay: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  methods: {
    createSwitchButton() {
      const vNodes = [];
      for (let index = 0; index < this.options.length; index++) {
        const h = this.$createElement;
        const item = this.options[index];
        const vNode = h(
          'YRadioBtn',
          {
            props: { ...this.attrs },
            attrs: {
              value: item[this.displayValue]
            }
          },
          [item[this.displayName]]
        );
        vNodes.push(vNode);
      }
      return vNodes;
    }
  },
  render(h) {
    // v-if
    if (_isEqual(this.isRender, false)) {
      return h();
    }
    const style = {};
    // v-show
    if (_isEqual(this.isDisplay, false)) {
      _set(style, 'display', 'none');
    }
    return h(
      'YRadioGroup',
      {
        ref: `${this._uid}-base-switch-button`,
        class: [this.groupCls],
        props: _assign(
          {},
          {
            value: this.value
          },
          this.$attrs
        ),
        style,
        on: {
          input: index => {
            const currentItem = _find(
              this.options,
              v => v[this.displayValue] === index
            );
            this.$emit('change', index, currentItem);
          }
        }
      },
      this.createSwitchButton()
    );
  }
};
BaseSwitchButton.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole('按需加载独立组件：' + BaseSwitchButton.name);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseSwitchButton.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseSwitchButton.name, BaseSwitchButton);
};
export { BaseSwitchButton };