@fe6/water-pro/es/scrollbar/scroll.js

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

import { Fragment as _Fragment, resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/** @format */
import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, provide, computed, inject } from 'vue';
import { defaultConfigProvider } from '../config-provider';
import PropTypes from '../_util/vue-types';
import { getSlot } from '../_util/props-util';
import { addResizeListener, removeResizeListener } from '../_util/dom';
import Bar from './bar';
import DOMWrap from './dom-wap';

function extend(to, _from) {
  return _extends(to, _from);
}

export function toObject(arr) {
  var res = {};

  for (var i = 0; i < arr.length; i++) {
    if (arr[i]) {
      extend(res, arr[i]);
    }
  }

  return res;
}
export default defineComponent({
  name: 'AScrollbar',
  // inheritAttrs: false,
  components: {
    Bar: Bar
  },
  props: {
    native: {
      type: Boolean,
      default: false
    },
    wrapStyle: {
      type: [String, Array],
      default: ''
    },
    wrapClass: {
      type: [String, Array],
      default: ''
    },
    viewClass: {
      type: [String, Array],
      default: ''
    },
    viewStyle: {
      type: [String, Array],
      default: ''
    },
    showHorizontal: Boolean,
    noresize: {
      type: Boolean,
      default: true
    },
    tag: {
      type: String,
      default: 'div'
    },
    prefixCls: PropTypes.string
  },
  setup: function setup(props) {
    var sizeWidth = ref('0');
    var sizeHeight = ref('0');
    var moveX = ref(0);
    var moveY = ref(0);
    var wrap = ref(null);
    var resize = ref(null); // TODO [fix] 解决使用的过程中未用 configProvider 报错

    var configProvider = inject('configProvider', defaultConfigProvider) || defaultConfigProvider;
    var prefixClsNew = configProvider.getPrefixCls('scrollbar', props.prefixCls);
    provide('scroll-bar-wrap', wrap);

    var handleScroll = function handleScroll() {
      if (!props.native) {
        moveY.value = wrap.value.scrollTop * 100 / wrap.value.clientHeight;
        moveX.value = wrap.value.scrollLeft * 100 / wrap.value.clientWidth;
      }
    };

    var update = function update() {
      if (!wrap.value) {
        return;
      }

      var heightPercentage = wrap.value.clientHeight * 100 / wrap.value.scrollHeight;
      var widthPercentage = wrap.value.clientWidth * 100 / wrap.value.scrollWidth;
      sizeHeight.value = heightPercentage < 100 ? "".concat(heightPercentage, "%") : '';
      sizeWidth.value = widthPercentage < 100 ? "".concat(widthPercentage, "%") : '';
    };

    onMounted(function () {
      if (props.native) {
        return;
      }

      nextTick(update);

      if (!props.noresize) {
        addResizeListener(resize.value, update);
        addResizeListener(wrap.value, update);
      }
    });
    onBeforeUnmount(function () {
      if (props.native) {
        return;
      }

      if (!props.noresize) {
        removeResizeListener(resize.value, update);
        removeResizeListener(wrap.value, update);
      }
    });
    var style = computed(function () {
      var style = props.wrapStyle;

      if (Array.isArray(props.wrapStyle)) {
        style = toObject(props.wrapStyle);
      }

      return style;
    });
    var domWrapProps = {
      onUpdateDom: update
    };
    return {
      moveX: moveX,
      moveY: moveY,
      sizeWidth: sizeWidth,
      sizeHeight: sizeHeight,
      style: style,
      wrap: wrap,
      resize: resize,
      update: update,
      handleScroll: handleScroll,
      prefixClsNew: prefixClsNew,
      domWrapProps: domWrapProps
    };
  },
  render: function render() {
    var compProps = {
      ref: 'resize',
      class: ["".concat(this.prefixClsNew, "-view"), this.viewClass],
      style: this.viewStyle
    };
    var children = getSlot(this);

    var compChildren = _createVNode("div", compProps, [children]);

    var horizontalNode = null;

    if (this.showHorizontal) {
      horizontalNode = _createVNode(_resolveComponent("bar"), {
        "move": this.moveX,
        "size": this.sizeWidth
      }, null);
    }

    var myScroll = null;

    if (!this.native) {
      myScroll = _createVNode(_Fragment, null, [horizontalNode, _createVNode(_resolveComponent("bar"), {
        "vertical": true,
        "move": this.moveY,
        "size": this.sizeHeight
      }, null)]);
    }

    return _createVNode("div", {
      "class": this.prefixClsNew
    }, [_createVNode("div", {
      "ref": "wrap",
      "class": [this.wrapClass, "".concat(this.prefixClsNew, "-wrap"), this.native ? '' : "".concat(this.prefixClsNew, "-wrap-hidden-default")],
      "style": this.style,
      "onScroll": this.handleScroll
    }, [_createVNode(DOMWrap, this.domWrapProps, {
      default: function _default() {
        return [compChildren];
      }
    })]), myScroll]);
  }
});