shu-c-view/packages/view-collapse/index.js

rollup 打包vue@2.7组件库框架

/**
 * @desc Collapse 折叠面板，用于多组件共存在一个页面时切换使用，主要想替换 v-if 或者 v-show
 */
import _isNil from 'lodash/isNil';
import _hasIn from 'lodash/hasIn';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import _get from 'lodash/get';
import { devConsole } from '../helper/util.js';

const BaseViewCollapse = {
  name: 'BaseViewCollapse',
  inheritAttrs: false,
  model: {
    prop: 'activeName',
    event: 'changeActiveName'
  },
  props: {
    activeName: {
      type: String
    },
    // 需要触发组件激活事件的 ref 值，激活事件 viewCollapseActivated
    propsRef: {
      type: Array,
      default() {
        return [];
      }
    },
    // 直属组件的ref
    directlyComRef: {
      type: String
    }
  },
  watch: {
    activeName(val, oldVal) {
      if (val !== oldVal) {
        this.curActiveName = val;
        setTimeout(() => {
          for (let i = 0, len = this.propsRef.length; i < len; i++) {
            const view = this.$parent.$refs[this.propsRef[i].ref];
            // view.$options 在vue2.6版本里不能缺失这里还要进行 vue@2.7和2.6 的复测
            if (!_isNil(view) && this.activeName === this.propsRef[i].name) {
              if (_hasIn(view.$options, 'viewCollapseActivated')) {
                view.$options.viewCollapseActivated.call(view); // 激活事件，vue@2.6
              }
              if (_hasIn(view, 'viewCollapseActivated')) {
                // eslint-disable-next-line no-useless-call
                view.viewCollapseActivated.call(view); // 激活事件，vue@2.7
              }
            }
          }
        }, 0);
      }
    }
  },
  data() {
    return {
      curActiveName: this.activeName,
      itemHeight: 0
    };
  },
  methods: {
    // 对组件进行重新布局
    doLayout() {
      this.itemHeight = `${this.$refs['el-collapse-ref'].$parent.$parent.$el
        .clientHeight - 2}px`;
    },
    getCollapseItemList() {
      const collapseItemList = [];
      for (let i = 0, len = this.$slots.default.length; i < len; i++) {
        if (this.$slots.default[i].data) {
          const slotNode = this.$slots.default[i];
          // slotNode.elm.style.height = '500px';
          const collapseItem = this.$createElement(
            'el-collapse-item',
            {
              // style: { height: this.itemHeight },
              props: {
                ...slotNode.data.attrs
              }
            },
            [
              this.$createElement(
                'div',
                {
                  style: {
                    height:
                      _get(slotNode, 'data.attrs.height') === 'auto'
                        ? 'auto'
                        : this.itemHeight
                  }
                },
                [slotNode]
              )
            ]
          );
          collapseItemList.push(collapseItem);
        }
      }
      return collapseItemList;
    }
  },
  render(h) {
    return h(
      'el-collapse',
      {
        ref: 'el-collapse-ref',
        class: 'base-collapse',
        props: {
          value: this.curActiveName,
          accordion: true
        },
        on: {
          'hook:mounted': () => {
            setTimeout(() => {
              let directlyCom = null;
              if (!_isNil(this.directlyComRef)) {
                directlyCom = this.$parent.$refs[this.directlyComRef];
                if (_isNil(directlyCom)) {
                  directlyCom = this.$el.parentNode;
                }
              } else {
                directlyCom = this.$refs['el-collapse-ref'].$parent.$parent.$el;
              }
              this.itemHeight = `${directlyCom.clientHeight - 2}px`;
            }, 0);
          },
          // change: val => {
          //   this.$emit('change', val); // 只是改变 this.curActiveName 的值无法触发 change 事件
          // },
          input: val => {
            this.curActiveName = `${val}`;
            this.$emit('changeActiveName', `${val}`);
          }
        }
      },
      this.getCollapseItemList()
    );
  }
};
BaseViewCollapse.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseViewCollapse.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseViewCollapse.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseViewCollapse.name, BaseViewCollapse);
};
export { BaseViewCollapse };