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

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

/** @format */
import { defineComponent, h, computed, ref, getCurrentInstance, onUnmounted, inject } from 'vue';
import { defaultConfigProvider } from '../config-provider';
import { on, off } from '../_util/dom';
import { renderThumbStyle, BAR_MAP } from './util';
export default defineComponent({
  name: 'Bar',
  props: {
    vertical: Boolean,
    size: String,
    move: Number,
    prefixCls: String
  },
  setup: function setup(props) {
    // TODO [fix] 解决使用的过程中未用 configProvider 报错
    var configProvider = inject('configProvider', defaultConfigProvider) || defaultConfigProvider;
    var prefixCls = configProvider.getPrefixCls('scrollbar', props.prefixCls);
    var instance = getCurrentInstance();
    var thumb = ref(null);
    var wrap = inject('scroll-bar-wrap', {});
    var bar = computed(function () {
      return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
    });
    var barStore = ref({});
    var cursorDown = ref(null);

    var clickThumbHandler = function clickThumbHandler(e) {
      // prevent click event of right button
      if (e.ctrlKey || e.button === 2) {
        return;
      }

      startDrag(e);
      barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
    };

    var clickTrackHandler = function clickTrackHandler(e) {
      var _a;

      var offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
      var thumbHalf = thumb.value[bar.value.offset] / 2;
      var thumbPositionPercentage = (offset - thumbHalf) * 100 / ((_a = instance === null || instance === void 0 ? void 0 : instance.vnode.el) === null || _a === void 0 ? void 0 : _a[bar.value.offset]);
      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
    };

    var startDrag = function startDrag(e) {
      e.stopImmediatePropagation();
      cursorDown.value = true;
      on(document, 'mousemove', mouseMoveDocumentHandler);
      on(document, 'mouseup', mouseUpDocumentHandler);

      document.onselectstart = function () {
        return false;
      };
    };

    var mouseMoveDocumentHandler = function mouseMoveDocumentHandler(e) {
      var _a, _b;

      if (cursorDown.value === false) {
        return;
      }

      var prevPage = barStore.value[bar.value.axis];

      if (!prevPage) {
        return;
      }

      var offset = (((_a = instance === null || instance === void 0 ? void 0 : instance.vnode.el) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()[bar.value.direction]) - e[bar.value.client]) * -1;
      var thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
      var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / ((_b = instance === null || instance === void 0 ? void 0 : instance.vnode.el) === null || _b === void 0 ? void 0 : _b[bar.value.offset]);
      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
    };

    function mouseUpDocumentHandler() {
      cursorDown.value = false;
      barStore.value[bar.value.axis] = 0;
      off(document, 'mousemove', mouseMoveDocumentHandler);
      document.onselectstart = null;
    }

    onUnmounted(function () {
      off(document, 'mouseup', mouseUpDocumentHandler);
    });
    return function () {
      return h('div', {
        class: ["".concat(prefixCls, "-bar"), "is-".concat(bar.value.key)],
        onMousedown: clickTrackHandler
      }, h('div', {
        ref: thumb,
        class: "".concat(prefixCls, "-thumb"),
        onMousedown: clickThumbHandler,
        style: renderThumbStyle({
          size: props.size,
          move: props.move,
          bar: bar.value
        })
      }));
    };
  }
});