wetrade-design
Version:
一款多语言支持Vue3的UI框架
250 lines • 8.46 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createVNode as _createVNode } from "vue";
import { ref, computed, defineComponent, watch, nextTick, provide, reactive, onMounted, onUpdated } from 'vue';
import 'vue';
// import { useEventListener } from '@vueuse/core';
import useConfigInject from '../../_util/hooks/useConfigInject';
import classNames from '../../_util/classNames';
import { addUnit } from '../../_util/util';
import { isNumber, isObject } from '../../_util/hooks/_vueuse/is';
import { useResizeObserver } from '../../_util/hooks/_vueuse/useResizeObserver';
import { useEventListener } from '../../_util/hooks/_vueuse/useEventListener';
import { GAP } from './utils';
import { scrollbarContextKey } from './constants';
import Bar from './bar';
export var scrollbarProps = function scrollbarProps() {
return {
/**
* @description height of scrollbar
*/
height: {
type: [String, Number],
default: ''
},
/**
* @description max height of scrollbar
*/
maxHeight: {
type: [String, Number],
default: ''
},
/**
* @description whether to use the native scrollbar
*/
native: {
type: Boolean,
default: false
},
/**
* @description style of wrap
*/
wrapStyle: {
type: Object,
default: undefined
},
/**
* @description class of wrap
*/
wrapClass: {
type: [String, Array],
default: ''
},
/**
* @description class of view
*/
viewClass: {
type: [String, Array],
default: ''
},
/**
* @description style of view
*/
viewStyle: {
type: [String, Array, Object],
default: ''
},
/**
* @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
*/
noresize: Boolean,
/**
* @description element tag of the view
*/
component: String,
/**
* @description always show
*/
always: Boolean,
/**
* @description minimum size of scrollbar
*/
minSize: {
type: Number,
default: 20
}
};
};
var Scrollbar = defineComponent({
name: 'WdScrollbar',
props: scrollbarProps(),
emits: ['scroll'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots,
expose = _ref.expose;
var COMPONENT_NAME = 'scrollbar';
var _useConfigInject = useConfigInject('scrollbar', props),
prefixCls = _useConfigInject.prefixCls;
var stopResizeObserver = undefined;
var stopResizeListener = undefined;
var scrollbarRef = ref();
var wrapRef = ref();
var resizeRef = ref();
var sizeWidth = ref('0');
var sizeHeight = ref('0');
var barRef = ref();
var ratioY = ref(1);
var ratioX = ref(1);
var style = computed(function () {
var style = {};
if (props.height) style.height = addUnit(props.height);
if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight);
return [props.wrapStyle, style];
});
var handleScroll = function handleScroll() {
if (wrapRef.value) {
var _barRef$value;
(_barRef$value = barRef.value) === null || _barRef$value === void 0 ? void 0 : _barRef$value.handleScroll(wrapRef.value);
emit('scroll', {
scrollTop: wrapRef.value.scrollTop,
scrollLeft: wrapRef.value.scrollLeft
});
}
};
function scrollTo(arg1, arg2) {
if (isObject(arg1)) {
wrapRef.value.scrollTo(arg1);
} else if (isNumber(arg1) && isNumber(arg2)) {
wrapRef.value.scrollTo(arg1, arg2);
}
}
var setScrollTop = function setScrollTop(value) {
if (!isNumber(value)) {
console.warn(COMPONENT_NAME, 'value must be a number');
return;
}
wrapRef.value.scrollTop = value;
};
var setScrollLeft = function setScrollLeft(value) {
if (!isNumber(value)) {
console.warn(COMPONENT_NAME, 'value must be a number');
return;
}
wrapRef.value.scrollLeft = value;
};
var update = function update() {
if (!wrapRef.value) return;
var offsetHeight = wrapRef.value.offsetHeight - GAP;
var offsetWidth = wrapRef.value.offsetWidth - GAP;
var originalHeight = Math.pow(offsetHeight, 2) / wrapRef.value.scrollHeight;
var originalWidth = Math.pow(offsetWidth, 2) / wrapRef.value.scrollWidth;
var height = Math.max(originalHeight, props.minSize);
var width = Math.max(originalWidth, props.minSize);
ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
sizeHeight.value = height + GAP < offsetHeight ? "".concat(height, "px") : '';
sizeWidth.value = width + GAP < offsetWidth ? "".concat(width, "px") : '';
};
watch(function () {
return props.noresize;
}, function (noresize) {
if (noresize) {
var _stopResizeObserver, _stopResizeListener;
(_stopResizeObserver = stopResizeObserver) === null || _stopResizeObserver === void 0 ? void 0 : _stopResizeObserver();
(_stopResizeListener = stopResizeListener) === null || _stopResizeListener === void 0 ? void 0 : _stopResizeListener();
} else {
var _useResizeObserver = useResizeObserver(resizeRef, update);
stopResizeObserver = _useResizeObserver.stop;
stopResizeListener = useEventListener('resize', update);
}
}, {
immediate: true
});
watch(function () {
return [props.maxHeight, props.height];
}, function () {
if (!props.native) nextTick(function () {
update();
if (wrapRef.value) {
var _barRef$value2;
(_barRef$value2 = barRef.value) === null || _barRef$value2 === void 0 ? void 0 : _barRef$value2.handleScroll(wrapRef.value);
}
});
});
provide(scrollbarContextKey, reactive({
scrollbarElement: scrollbarRef,
wrapElement: wrapRef
}));
onMounted(function () {
if (!props.native) nextTick(function () {
update();
});
});
onUpdated(function () {
return update();
});
expose({
/** @description scrollbar wrap ref */
wrapRef: wrapRef,
/** @description update scrollbar state manually */
update: update,
/** @description scrolls to a particular set of coordinates */
scrollTo: scrollTo,
/** @description set distance to scroll top */
setScrollTop: setScrollTop,
/** @description set distance to scroll left */
setScrollLeft: setScrollLeft,
/** @description handle scroll event */
handleScroll: handleScroll
});
return function () {
var _classNames, _slots$default;
var wrapKls = classNames("".concat(props.wrapClass), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-wrap"), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-wrap-hidden-default"), !props.native), _classNames));
var resizeKls = classNames("".concat(props.viewClass), _defineProperty({}, "".concat(prefixCls.value, "-view"), true));
var _props$component = props.component,
Component = _props$component === void 0 ? 'div' : _props$component,
always = props.always,
viewStyle = props.viewStyle,
native = props.native;
var barNode = null;
if (!native) {
barNode = _createVNode(Bar, {
"ref": barRef,
"height": sizeHeight.value,
"width": sizeWidth.value,
"always": always,
"ratio-x": ratioX.value,
"ratio-y": ratioY.value
}, null);
}
return _createVNode("div", {
"class": "".concat(prefixCls.value),
"ref": scrollbarRef
}, [_createVNode("div", {
"ref": wrapRef,
"class": wrapKls,
"style": style.value,
"onScroll": handleScroll
}, [_createVNode(Component, {
"ref": resizeRef,
"class": resizeKls,
"style": viewStyle
}, {
default: function _default() {
return [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
}
})]), barNode]);
};
}
});
export default Scrollbar;