wetrade-design
Version:
一款多语言支持Vue3的UI框架
142 lines (141 loc) • 6.65 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _utils = require("./utils");
var _constants = require("./constants");
var _useEventListener = require("../../_util/hooks/_vueuse/useEventListener");
var _classNames3 = _interopRequireDefault(require("../../_util/classNames"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var Thumb = (0, _vue.defineComponent)({
props: {
vertical: Boolean,
size: String,
move: Number,
ratio: {
type: Number,
required: true
},
always: Boolean
},
emits: [],
setup: function setup(props) {
var _useConfigInject = (0, _useConfigInject2.default)('scrollbar', props),
prefixCls = _useConfigInject.prefixCls;
var scrollbar = (0, _vue.inject)(_constants.scrollbarContextKey);
var instance = (0, _vue.ref)();
var thumb = (0, _vue.ref)();
var thumbState = (0, _vue.ref)({});
var visible = (0, _vue.ref)(false);
var cursorDown = false;
var cursorLeave = false;
var originalOnSelectStart = document.onselectstart;
var bar = (0, _vue.computed)(function () {
return _utils.BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
});
var offsetRatio = (0, _vue.computed)(function () {
return (
// offsetRatioX = original width of thumb / current width of thumb / ratioX
// offsetRatioY = original height of thumb / current height of thumb / ratioY
// instance height = wrap height - GAP
Math.pow(instance.value[bar.value.offset], 2) / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]
);
});
var thumbStyle = (0, _vue.computed)(function () {
return (0, _utils.renderThumbStyle)({
size: props.size,
move: props.move,
bar: bar.value
});
});
var startDrag = function startDrag(e) {
e.stopImmediatePropagation();
cursorDown = true;
document.addEventListener('mousemove', mouseMoveDocumentHandler);
document.addEventListener('mouseup', mouseUpDocumentHandler);
originalOnSelectStart = document.onselectstart;
document.onselectstart = function () {
return false;
};
};
var mouseMoveDocumentHandler = function mouseMoveDocumentHandler(e) {
if (!instance.value || !thumb.value) return;
if (cursorDown === false) return;
var prevPage = thumbState.value[bar.value.axis];
if (!prevPage) return;
var offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
var thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
var thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
};
var mouseUpDocumentHandler = function mouseUpDocumentHandler() {
cursorDown = false;
thumbState.value[bar.value.axis] = 0;
document.removeEventListener('mousemove', mouseMoveDocumentHandler);
document.removeEventListener('mouseup', mouseUpDocumentHandler);
restoreOnselectstart();
if (cursorLeave) visible.value = false;
};
var mouseMoveScrollbarHandler = function mouseMoveScrollbarHandler() {
cursorLeave = false;
visible.value = !!props.size;
};
var mouseLeaveScrollbarHandler = function mouseLeaveScrollbarHandler() {
cursorLeave = true;
visible.value = cursorDown;
};
(0, _vue.onBeforeUnmount)(function () {
restoreOnselectstart();
});
var restoreOnselectstart = function restoreOnselectstart() {
if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
};
var clickTrackHandler = function clickTrackHandler(e) {
if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
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 * offsetRatio.value / instance.value[bar.value.offset];
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
};
var clickThumbHandler = function clickThumbHandler(e) {
var _window$getSelection;
e.stopPropagation();
e.preventDefault(); // 阻止默认行为 例如失去焦点
if (e.ctrlKey || [1, 2].includes(e.button)) return;
(_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.removeAllRanges();
startDrag(e);
var el = e.currentTarget;
if (!el) return;
thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
};
(0, _useEventListener.useEventListener)((0, _vue.toRef)(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler);
(0, _useEventListener.useEventListener)((0, _vue.toRef)(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler);
return function () {
var _classNames;
// const thumbStyle = {};
var always = props.always;
var barClassName = (0, _classNames3.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-bar"), true), (0, _defineProperty2.default)(_classNames, "is-".concat(bar.value.key), true), _classNames));
var thumbClassName = (0, _classNames3.default)((0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-thumb"), true));
return (0, _vue.createVNode)(_vue.Transition, null, {
default: function _default() {
return [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
"class": barClassName,
"ref": instance,
"onMousedown": clickTrackHandler
}, [(0, _vue.createVNode)("div", {
"ref": thumb,
"class": thumbClassName,
"style": thumbStyle.value,
"onMousedown": clickThumbHandler
}, null)]), [[_vue.vShow, always || visible.value]])];
}
});
};
}
});
var _default2 = Thumb;
exports.default = _default2;