blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore: rename rootRef to root

Browse Source
This commit is contained in:
chenjiahan 2020-09-15 19:32:45 +08:00
parent b0ca6a997b
commit 1e7e7086d6
11 changed files with 46 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/datetime-picker/index.js
View File

@ -13,15 +13,15 @@ export default createComponent({
}, },
setup(props) { setup(props) {
const rootRef = ref(); const root = ref();
usePublicApi({ usePublicApi({
getPicker: () => rootRef.value && rootRef.value.getPicker(), getPicker: () => root.value && root.value.getPicker(),
}); });
return () => { return () => {
const Component = props.type === 'time' ? TimePicker : DatePicker; const Component = props.type === 'time' ? TimePicker : DatePicker;
return <Component ref={rootRef} class={bem()} {...props} />; return <Component ref={root} class={bem()} {...props} />;
}; };
}, },
}); });

8
src/dropdown-menu/index.js
View File

@ -36,10 +36,10 @@ export default createComponent({
setup(props, { slots }) { setup(props, { slots }) {
const offset = ref(0); const offset = ref(0);
const barRef = ref(); const barRef = ref();
const rootRef = ref(); const root = ref();
const children = reactive([]); const children = reactive([]);
const scrollParent = useScrollParent(rootRef); const scrollParent = useScrollParent(root);
const opened = computed(() => const opened = computed(() =>
children.some((item) => item.state.showWrapper) children.some((item) => item.state.showWrapper)
@ -120,12 +120,12 @@ export default createComponent({
provide(DROPDOWN_KEY, { props, offset, children }); provide(DROPDOWN_KEY, { props, offset, children });
useClickAway(rootRef, onClickAway); useClickAway(root, onClickAway);
useEventListener('scroll', onScroll, { target: scrollParent }); useEventListener('scroll', onScroll, { target: scrollParent });
return () => ( return () => (
<div ref={rootRef} class={bem()}> <div ref={root} class={bem()}>
<div <div
ref={barRef} ref={barRef}
style={barStyle.value} style={barStyle.value}

11
src/index-anchor/index.js
View File

@ -24,14 +24,14 @@ export default createComponent({
active: false, active: false,
}); });
const rootRef = ref(); const root = ref();
const height = useHeight(rootRef); const height = useHeight(root);
const { parent } = useParent(INDEX_BAR_KEY, { const { parent } = useParent(INDEX_BAR_KEY, {
props, props,
state, state,
height, height,
rootRef, root,
}); });
const isSticky = () => state.active && parent.props.sticky; const isSticky = () => state.active && parent.props.sticky;
@ -54,10 +54,7 @@ export default createComponent({
const sticky = isSticky(); const sticky = isSticky();
return ( return (
<div <div ref={root} style={{ height: sticky ? `${height.value}px` : null }}>
ref={rootRef}
style={{ height: sticky ? `${height.value}px` : null }}
>
<div <div
style={anchorStyle.value} style={anchorStyle.value}
class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]} class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}

16
src/index-bar/index.js
View File

@ -52,12 +52,12 @@ export default createComponent({
emits: ['select'], emits: ['select'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const rootRef = ref(); const root = ref();
const activeAnchor = ref(); const activeAnchor = ref();
const children = reactive([]); const children = reactive([]);
const touch = useTouch(); const touch = useTouch();
const scrollParent = useScrollParent(rootRef); const scrollParent = useScrollParent(root);
provide(INDEX_BAR_KEY, { props, children }); provide(INDEX_BAR_KEY, { props, children });
@ -113,7 +113,7 @@ export default createComponent({
}; };
const onScroll = () => { const onScroll = () => {
if (isHidden(rootRef.value)) { if (isHidden(root.value)) {
return; return;
} }
@ -123,7 +123,7 @@ export default createComponent({
const rects = children.map((item) => ({ const rects = children.map((item) => ({
height: item.height, height: item.height,
top: getAnchorTop(item.rootRef, scrollParentRect), top: getAnchorTop(item.root, scrollParentRect),
})); }));
const active = getActiveAnchor(scrollTop, rects); const active = getActiveAnchor(scrollTop, rects);
@ -132,9 +132,9 @@ export default createComponent({
if (sticky) { if (sticky) {
children.forEach((item, index) => { children.forEach((item, index) => {
const { state, height, rootRef } = item; const { state, height, root } = item;
if (index === active || index === active - 1) { if (index === active || index === active - 1) {
const rect = rootRef.getBoundingClientRect(); const rect = root.getBoundingClientRect();
state.left = rect.left; state.left = rect.left;
state.width = rect.width; state.width = rect.width;
} else { } else {
@ -192,7 +192,7 @@ export default createComponent({
); );
if (match[0]) { if (match[0]) {
match[0].rootRef.scrollIntoView(); match[0].root.scrollIntoView();
if (props.sticky && props.stickyOffsetTop) { if (props.sticky && props.stickyOffsetTop) {
setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop); setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
@ -228,7 +228,7 @@ export default createComponent({
}; };
return () => ( return () => (
<div ref={rootRef} class={bem()}> <div ref={root} class={bem()}>
<div <div
class={bem('sidebar')} class={bem('sidebar')}
style={sidebarStyle.value} style={sidebarStyle.value}

8
src/list/index.js
View File

@ -41,9 +41,9 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
// use sync innerLoading state to avoid repeated loading in some edge cases // use sync innerLoading state to avoid repeated loading in some edge cases
const loading = ref(false); const loading = ref(false);
const rootRef = ref(); const root = ref();
const placeholderRef = ref(); const placeholderRef = ref();
const scrollParent = useScrollParent(rootRef); const scrollParent = useScrollParent(root);
const check = () => { const check = () => {
nextTick(() => { nextTick(() => {
@ -67,7 +67,7 @@ export default createComponent({
scrollParentRect.bottom - scrollParentRect.top; scrollParentRect.bottom - scrollParentRect.top;
/* istanbul ignore next */ /* istanbul ignore next */
if (!scrollParentHeight || isHidden(rootRef.value)) { if (!scrollParentHeight || isHidden(root.value)) {
return false; return false;
} }
@ -153,7 +153,7 @@ export default createComponent({
); );
return ( 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} {props.direction === 'down' ? Content : Placeholder}
{renderLoading()} {renderLoading()}
{renderFinishedText()} {renderFinishedText()}

6
src/number-keyboard/index.js
View File

@ -60,7 +60,7 @@ export default createComponent({
], ],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const rootRef = ref(); const root = ref();
const genBasicKeys = () => { const genBasicKeys = () => {
const keys = []; const keys = [];
@ -224,14 +224,14 @@ export default createComponent({
} }
); );
useClickAway(rootRef, onClose, { eventName: 'touchstart' }); useClickAway(root, onClose, { eventName: 'touchstart' });
return () => { return () => {
const Title = renderTitle(); const Title = renderTitle();
const Content = ( const Content = (
<Transition name={props.transition ? 'van-slide-up' : ''}> <Transition name={props.transition ? 'van-slide-up' : ''}>
<div <div
ref={rootRef} ref={root}
vShow={props.show} vShow={props.show}
style={{ zIndex: props.zIndex }} style={{ zIndex: props.zIndex }}
class={bem({ class={bem({

6
src/progress/index.js
View File

@ -24,7 +24,7 @@ export default createComponent({
}, },
setup(props) { setup(props) {
const rootRef = ref(); const root = ref();
const pivotRef = ref(); const pivotRef = ref();
const state = reactive({ const state = reactive({
@ -38,7 +38,7 @@ export default createComponent({
const setWidth = () => { const setWidth = () => {
nextTick(() => { nextTick(() => {
state.rootWidth = rootRef.value.offsetWidth; state.rootWidth = root.value.offsetWidth;
state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0; state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
}); });
}; };
@ -81,7 +81,7 @@ export default createComponent({
}; };
return ( return (
<div ref={rootRef} class={bem()} style={rootStyle}> <div ref={root} class={bem()} style={rootStyle}>
<span class={bem('portion')} style={portionStyle}> <span class={bem('portion')} style={portionStyle}>
{renderPivot()} {renderPivot()}
</span> </span>

6
src/pull-refresh/index.js
View File

@ -47,8 +47,8 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
let reachTop; let reachTop;
const rootRef = ref(); const root = ref();
const scrollParent = useScrollParent(rootRef); const scrollParent = useScrollParent(root);
const state = reactive({ const state = reactive({
status: 'normal', status: 'normal',
@ -201,7 +201,7 @@ export default createComponent({
}; };
return ( return (
<div ref={rootRef} class={bem()}> <div ref={root} class={bem()}>
<div <div
class={bem('track')} class={bem('track')}
style={trackStyle} style={trackStyle}

8
src/slider/index.js
View File

@ -46,7 +46,7 @@ export default createComponent({
let currentValue; let currentValue;
let index; let index;
const rootRef = ref(); const root = ref();
const dragStatus = ref(); const dragStatus = ref();
const touch = useTouch(); const touch = useTouch();
@ -132,7 +132,7 @@ export default createComponent({
} }
const { min, vertical, modelValue, range } = props; const { min, vertical, modelValue, range } = props;
const rect = useRect(rootRef); const rect = useRect(root);
const delta = vertical const delta = vertical
? event.clientY - rect.top ? event.clientY - rect.top
: event.clientX - rect.left; : event.clientX - rect.left;
@ -182,7 +182,7 @@ export default createComponent({
touch.move(event); touch.move(event);
dragStatus.value = 'draging'; dragStatus.value = 'draging';
const rect = useRect(rootRef); const rect = useRect(root);
const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value; const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
const total = props.vertical ? rect.height : rect.width; const total = props.vertical ? rect.height : rect.width;
const diff = (delta / total) * scope.value; const diff = (delta / total) * scope.value;
@ -253,7 +253,7 @@ export default createComponent({
return () => ( return () => (
<div <div
ref={rootRef} ref={root}
style={wrapperStyle.value} style={wrapperStyle.value}
class={bem({ class={bem({
vertical: props.vertical, vertical: props.vertical,

14
src/sticky/index.js
View File

@ -25,8 +25,8 @@ export default createComponent({
emits: ['scroll'], emits: ['scroll'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const rootRef = ref(); const root = ref();
const scrollParent = useScrollParent(rootRef); const scrollParent = useScrollParent(root);
const state = reactive({ const state = reactive({
fixed: false, fixed: false,
@ -61,15 +61,15 @@ export default createComponent({
}; };
const onScroll = () => { const onScroll = () => {
if (isHidden(rootRef.value)) { if (isHidden(root.value)) {
return; return;
} }
state.height = rootRef.value.offsetHeight; state.height = root.value.offsetHeight;
const { container } = props; const { container } = props;
const scrollTop = getScrollTop(window); const scrollTop = getScrollTop(window);
const topToPageTop = getElementTop(rootRef.value); const topToPageTop = getElementTop(root.value);
// The sticky component should be kept inside the container element // The sticky component should be kept inside the container element
if (container) { if (container) {
@ -102,7 +102,7 @@ export default createComponent({
useEventListener('scroll', onScroll, { target: scrollParent }); useEventListener('scroll', onScroll, { target: scrollParent });
useVisibilityChange(rootRef, onScroll); useVisibilityChange(root, onScroll);
return () => { return () => {
const { fixed, height } = state; const { fixed, height } = state;
@ -111,7 +111,7 @@ export default createComponent({
}; };
return ( return (
<div ref={rootRef} style={rootStyle}> <div ref={root} style={rootStyle}>
<div class={bem({ fixed })} style={style.value}> <div class={bem({ fixed })} style={style.value}>
{slots.default?.()} {slots.default?.()}
</div> </div>

6
src/swipe-cell/index.js
View File

@ -34,7 +34,7 @@ export default createComponent({
let lockClick; let lockClick;
let startOffset; let startOffset;
const rootRef = ref(); const root = ref();
const leftRef = ref(); const leftRef = ref();
const rightRef = ref(); const rightRef = ref();
@ -183,7 +183,7 @@ export default createComponent({
close, close,
}); });
useClickAway(rootRef, onClick, { eventName: 'touchstart' }); useClickAway(root, onClick, { eventName: 'touchstart' });
return () => { return () => {
const wrapperStyle = { const wrapperStyle = {
@ -193,7 +193,7 @@ export default createComponent({
return ( return (
<div <div
ref={rootRef} ref={root}
class={bem()} class={bem()}
onClick={getClickHandler('cell')} onClick={getClickHandler('cell')}
onTouchstart={onTouchStart} onTouchstart={onTouchStart}