iep-ui/es/scrollbar/Scrollbar.js

An enterprise-class UI design language and Vue-based implementation

import { addResizeListener, removeResizeListener } from '../vc-util/Dom/resize-event';
import scrollbarWidth from '../vc-util/Dom/scrollbar-width';
import { toObject } from '../vc-util/Dom/util';
import Bar from './bar';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import { getOptionProps } from '../_util/props-util';

/* istanbul ignore next */
export default {
  name: 'AScrollbar',

  components: { Bar: Bar },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  props: {
    native: Boolean,
    wrapStyle: {},
    wrapClass: {},
    viewClass: {},
    viewStyle: {},
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {
      type: String,
      'default': 'div'
    }
  },

  data: function data() {
    return {
      sizeWidth: '0',
      sizeHeight: '0',
      moveX: 0,
      moveY: 0
    };
  },


  computed: {
    wrap: function wrap() {
      return this.$refs.wrap;
    }
  },

  mounted: function mounted() {
    if (this.native) return;
    this.$nextTick(this.update);
    !this.noresize && addResizeListener(this.$refs.resize, this.update);
  },
  beforeDestroy: function beforeDestroy() {
    if (this.native) return;
    !this.noresize && removeResizeListener(this.$refs.resize, this.update);
  },


  methods: {
    handleScroll: function handleScroll() {
      var wrap = this.wrap;

      this.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
      this.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
    },
    update: function update() {
      var heightPercentage = void 0,
          widthPercentage = void 0;
      var wrap = this.wrap;
      if (!wrap) return;

      heightPercentage = wrap.clientHeight * 100 / wrap.scrollHeight;
      widthPercentage = wrap.clientWidth * 100 / wrap.scrollWidth;

      this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '';
      this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : '';
    }
  },

  render: function render(h) {
    var props = getOptionProps(this);
    var customizePrefixCls = props.prefixCls;

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('scrollbar', customizePrefixCls);
    var gutter = scrollbarWidth(prefixCls);
    var style = this.wrapStyle;

    if (gutter) {
      var gutterWith = '-' + gutter + 'px';
      var gutterStyle = 'margin-bottom: ' + gutterWith + '; margin-right: ' + gutterWith + ';';

      if (Array.isArray(this.wrapStyle)) {
        style = toObject(this.wrapStyle);
        style.marginRight = style.marginBottom = gutterWith;
      } else if (typeof this.wrapStyle === 'string') {
        style += gutterStyle;
      } else {
        style = gutterStyle;
      }
    }
    var view = h(this.tag, {
      'class': [prefixCls + '__view', this.viewClass],
      style: this.viewStyle,
      ref: 'resize'
    }, this.$slots['default']);
    var wrap = h(
      'div',
      {
        ref: 'wrap',
        style: style,
        on: {
          'scroll': this.handleScroll
        },

        'class': [this.wrapClass, prefixCls + '__wrap', gutter ? '' : prefixCls + '__wrap--hidden-default']
      },
      [[view]]
    );
    var nodes = void 0;

    if (!this.native) {
      nodes = [wrap, h(Bar, {
        attrs: { prefixCls: prefixCls, move: this.moveX, size: this.sizeWidth }
      }), h(Bar, {
        attrs: { prefixCls: prefixCls, vertical: true, move: this.moveY, size: this.sizeHeight }
      })];
    } else {
      nodes = [h(
        'div',
        { ref: 'wrap', 'class': [this.wrapClass, prefixCls + '__wrap'], style: style },
        [[view]]
      )];
    }
    return h('div', { 'class': '' + prefixCls }, nodes);
  }
};