mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore: rename rootRef to root
This commit is contained in:
parent
b0ca6a997b
commit
1e7e7086d6
@ -13,15 +13,15 @@ export default createComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
|
||||
usePublicApi({
|
||||
getPicker: () => rootRef.value && rootRef.value.getPicker(),
|
||||
getPicker: () => root.value && root.value.getPicker(),
|
||||
});
|
||||
|
||||
return () => {
|
||||
const Component = props.type === 'time' ? TimePicker : DatePicker;
|
||||
return <Component ref={rootRef} class={bem()} {...props} />;
|
||||
return <Component ref={root} class={bem()} {...props} />;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -36,10 +36,10 @@ export default createComponent({
|
||||
setup(props, { slots }) {
|
||||
const offset = ref(0);
|
||||
const barRef = ref();
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
const children = reactive([]);
|
||||
|
||||
const scrollParent = useScrollParent(rootRef);
|
||||
const scrollParent = useScrollParent(root);
|
||||
|
||||
const opened = computed(() =>
|
||||
children.some((item) => item.state.showWrapper)
|
||||
@ -120,12 +120,12 @@ export default createComponent({
|
||||
|
||||
provide(DROPDOWN_KEY, { props, offset, children });
|
||||
|
||||
useClickAway(rootRef, onClickAway);
|
||||
useClickAway(root, onClickAway);
|
||||
|
||||
useEventListener('scroll', onScroll, { target: scrollParent });
|
||||
|
||||
return () => (
|
||||
<div ref={rootRef} class={bem()}>
|
||||
<div ref={root} class={bem()}>
|
||||
<div
|
||||
ref={barRef}
|
||||
style={barStyle.value}
|
||||
|
@ -24,14 +24,14 @@ export default createComponent({
|
||||
active: false,
|
||||
});
|
||||
|
||||
const rootRef = ref();
|
||||
const height = useHeight(rootRef);
|
||||
const root = ref();
|
||||
const height = useHeight(root);
|
||||
|
||||
const { parent } = useParent(INDEX_BAR_KEY, {
|
||||
props,
|
||||
state,
|
||||
height,
|
||||
rootRef,
|
||||
root,
|
||||
});
|
||||
|
||||
const isSticky = () => state.active && parent.props.sticky;
|
||||
@ -54,10 +54,7 @@ export default createComponent({
|
||||
const sticky = isSticky();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
style={{ height: sticky ? `${height.value}px` : null }}
|
||||
>
|
||||
<div ref={root} style={{ height: sticky ? `${height.value}px` : null }}>
|
||||
<div
|
||||
style={anchorStyle.value}
|
||||
class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}
|
||||
|
@ -52,12 +52,12 @@ export default createComponent({
|
||||
emits: ['select'],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
const activeAnchor = ref();
|
||||
const children = reactive([]);
|
||||
|
||||
const touch = useTouch();
|
||||
const scrollParent = useScrollParent(rootRef);
|
||||
const scrollParent = useScrollParent(root);
|
||||
|
||||
provide(INDEX_BAR_KEY, { props, children });
|
||||
|
||||
@ -113,7 +113,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
if (isHidden(rootRef.value)) {
|
||||
if (isHidden(root.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@ export default createComponent({
|
||||
|
||||
const rects = children.map((item) => ({
|
||||
height: item.height,
|
||||
top: getAnchorTop(item.rootRef, scrollParentRect),
|
||||
top: getAnchorTop(item.root, scrollParentRect),
|
||||
}));
|
||||
|
||||
const active = getActiveAnchor(scrollTop, rects);
|
||||
@ -132,9 +132,9 @@ export default createComponent({
|
||||
|
||||
if (sticky) {
|
||||
children.forEach((item, index) => {
|
||||
const { state, height, rootRef } = item;
|
||||
const { state, height, root } = item;
|
||||
if (index === active || index === active - 1) {
|
||||
const rect = rootRef.getBoundingClientRect();
|
||||
const rect = root.getBoundingClientRect();
|
||||
state.left = rect.left;
|
||||
state.width = rect.width;
|
||||
} else {
|
||||
@ -192,7 +192,7 @@ export default createComponent({
|
||||
);
|
||||
|
||||
if (match[0]) {
|
||||
match[0].rootRef.scrollIntoView();
|
||||
match[0].root.scrollIntoView();
|
||||
|
||||
if (props.sticky && props.stickyOffsetTop) {
|
||||
setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
|
||||
@ -228,7 +228,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
return () => (
|
||||
<div ref={rootRef} class={bem()}>
|
||||
<div ref={root} class={bem()}>
|
||||
<div
|
||||
class={bem('sidebar')}
|
||||
style={sidebarStyle.value}
|
||||
|
@ -41,9 +41,9 @@ export default createComponent({
|
||||
setup(props, { emit, slots }) {
|
||||
// use sync innerLoading state to avoid repeated loading in some edge cases
|
||||
const loading = ref(false);
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
const placeholderRef = ref();
|
||||
const scrollParent = useScrollParent(rootRef);
|
||||
const scrollParent = useScrollParent(root);
|
||||
|
||||
const check = () => {
|
||||
nextTick(() => {
|
||||
@ -67,7 +67,7 @@ export default createComponent({
|
||||
scrollParentRect.bottom - scrollParentRect.top;
|
||||
|
||||
/* istanbul ignore next */
|
||||
if (!scrollParentHeight || isHidden(rootRef.value)) {
|
||||
if (!scrollParentHeight || isHidden(root.value)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -153,7 +153,7 @@ export default createComponent({
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={rootRef} role="feed" class={bem()} aria-busy={loading.value}>
|
||||
<div ref={root} role="feed" class={bem()} aria-busy={loading.value}>
|
||||
{props.direction === 'down' ? Content : Placeholder}
|
||||
{renderLoading()}
|
||||
{renderFinishedText()}
|
||||
|
@ -60,7 +60,7 @@ export default createComponent({
|
||||
],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
|
||||
const genBasicKeys = () => {
|
||||
const keys = [];
|
||||
@ -224,14 +224,14 @@ export default createComponent({
|
||||
}
|
||||
);
|
||||
|
||||
useClickAway(rootRef, onClose, { eventName: 'touchstart' });
|
||||
useClickAway(root, onClose, { eventName: 'touchstart' });
|
||||
|
||||
return () => {
|
||||
const Title = renderTitle();
|
||||
const Content = (
|
||||
<Transition name={props.transition ? 'van-slide-up' : ''}>
|
||||
<div
|
||||
ref={rootRef}
|
||||
ref={root}
|
||||
vShow={props.show}
|
||||
style={{ zIndex: props.zIndex }}
|
||||
class={bem({
|
||||
|
@ -24,7 +24,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
const pivotRef = ref();
|
||||
|
||||
const state = reactive({
|
||||
@ -38,7 +38,7 @@ export default createComponent({
|
||||
|
||||
const setWidth = () => {
|
||||
nextTick(() => {
|
||||
state.rootWidth = rootRef.value.offsetWidth;
|
||||
state.rootWidth = root.value.offsetWidth;
|
||||
state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
|
||||
});
|
||||
};
|
||||
@ -81,7 +81,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={rootRef} class={bem()} style={rootStyle}>
|
||||
<div ref={root} class={bem()} style={rootStyle}>
|
||||
<span class={bem('portion')} style={portionStyle}>
|
||||
{renderPivot()}
|
||||
</span>
|
||||
|
@ -47,8 +47,8 @@ export default createComponent({
|
||||
setup(props, { emit, slots }) {
|
||||
let reachTop;
|
||||
|
||||
const rootRef = ref();
|
||||
const scrollParent = useScrollParent(rootRef);
|
||||
const root = ref();
|
||||
const scrollParent = useScrollParent(root);
|
||||
|
||||
const state = reactive({
|
||||
status: 'normal',
|
||||
@ -201,7 +201,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={rootRef} class={bem()}>
|
||||
<div ref={root} class={bem()}>
|
||||
<div
|
||||
class={bem('track')}
|
||||
style={trackStyle}
|
||||
|
@ -46,7 +46,7 @@ export default createComponent({
|
||||
let currentValue;
|
||||
let index;
|
||||
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
const dragStatus = ref();
|
||||
const touch = useTouch();
|
||||
|
||||
@ -132,7 +132,7 @@ export default createComponent({
|
||||
}
|
||||
|
||||
const { min, vertical, modelValue, range } = props;
|
||||
const rect = useRect(rootRef);
|
||||
const rect = useRect(root);
|
||||
const delta = vertical
|
||||
? event.clientY - rect.top
|
||||
: event.clientX - rect.left;
|
||||
@ -182,7 +182,7 @@ export default createComponent({
|
||||
touch.move(event);
|
||||
dragStatus.value = 'draging';
|
||||
|
||||
const rect = useRect(rootRef);
|
||||
const rect = useRect(root);
|
||||
const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
|
||||
const total = props.vertical ? rect.height : rect.width;
|
||||
const diff = (delta / total) * scope.value;
|
||||
@ -253,7 +253,7 @@ export default createComponent({
|
||||
|
||||
return () => (
|
||||
<div
|
||||
ref={rootRef}
|
||||
ref={root}
|
||||
style={wrapperStyle.value}
|
||||
class={bem({
|
||||
vertical: props.vertical,
|
||||
|
@ -25,8 +25,8 @@ export default createComponent({
|
||||
emits: ['scroll'],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const rootRef = ref();
|
||||
const scrollParent = useScrollParent(rootRef);
|
||||
const root = ref();
|
||||
const scrollParent = useScrollParent(root);
|
||||
|
||||
const state = reactive({
|
||||
fixed: false,
|
||||
@ -61,15 +61,15 @@ export default createComponent({
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
if (isHidden(rootRef.value)) {
|
||||
if (isHidden(root.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.height = rootRef.value.offsetHeight;
|
||||
state.height = root.value.offsetHeight;
|
||||
|
||||
const { container } = props;
|
||||
const scrollTop = getScrollTop(window);
|
||||
const topToPageTop = getElementTop(rootRef.value);
|
||||
const topToPageTop = getElementTop(root.value);
|
||||
|
||||
// The sticky component should be kept inside the container element
|
||||
if (container) {
|
||||
@ -102,7 +102,7 @@ export default createComponent({
|
||||
|
||||
useEventListener('scroll', onScroll, { target: scrollParent });
|
||||
|
||||
useVisibilityChange(rootRef, onScroll);
|
||||
useVisibilityChange(root, onScroll);
|
||||
|
||||
return () => {
|
||||
const { fixed, height } = state;
|
||||
@ -111,7 +111,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={rootRef} style={rootStyle}>
|
||||
<div ref={root} style={rootStyle}>
|
||||
<div class={bem({ fixed })} style={style.value}>
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
|
@ -34,7 +34,7 @@ export default createComponent({
|
||||
let lockClick;
|
||||
let startOffset;
|
||||
|
||||
const rootRef = ref();
|
||||
const root = ref();
|
||||
const leftRef = ref();
|
||||
const rightRef = ref();
|
||||
|
||||
@ -183,7 +183,7 @@ export default createComponent({
|
||||
close,
|
||||
});
|
||||
|
||||
useClickAway(rootRef, onClick, { eventName: 'touchstart' });
|
||||
useClickAway(root, onClick, { eventName: 'touchstart' });
|
||||
|
||||
return () => {
|
||||
const wrapperStyle = {
|
||||
@ -193,7 +193,7 @@ export default createComponent({
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
ref={root}
|
||||
class={bem()}
|
||||
onClick={getClickHandler('cell')}
|
||||
onTouchstart={onTouchStart}
|
||||
|
Loading…
x
Reference in New Issue
Block a user