diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js index 13d1f67a8..780ead33d 100644 --- a/src/swipe-item/index.js +++ b/src/swipe-item/index.js @@ -1,7 +1,8 @@ import { computed, nextTick, onMounted, reactive } from 'vue'; import { SWIPE_KEY } from '../swipe'; import { createNamespace } from '../utils'; -import { useParent } from '../composition/use-parent'; +import { useExpose } from '../composition/use-expose'; +import { useParent } from '../composition/use-relation'; const [createComponent, bem] = createNamespace('swipe-item'); @@ -12,17 +13,7 @@ export default createComponent({ mounted: false, }); - const setOffset = (offset) => { - state.offset = offset; - }; - - const { parent, index } = useParent(SWIPE_KEY, { setOffset }); - - onMounted(() => { - nextTick(() => { - state.mounted = true; - }); - }); + const { parent, index } = useParent(SWIPE_KEY); const style = computed(() => { const style = {}; @@ -55,6 +46,18 @@ export default createComponent({ return index.value >= prevActive || index.value <= nextActive; }); + const setOffset = (offset) => { + state.offset = offset; + }; + + onMounted(() => { + nextTick(() => { + state.mounted = true; + }); + }); + + useExpose({ setOffset }); + return () => (
{shouldRender.value ? slots.default?.() : null} diff --git a/src/swipe/index.js b/src/swipe/index.js index c29dd9c5a..52a9200cf 100644 --- a/src/swipe/index.js +++ b/src/swipe/index.js @@ -1,7 +1,6 @@ import { ref, watch, - provide, reactive, computed, onMounted, @@ -18,10 +17,11 @@ import { doubleRaf } from '../utils/dom/raf'; import { preventDefault } from '../utils/dom/event'; // Composition -import { useTouch } from '../composition/use-touch'; -import { useRect } from '../composition/use-rect'; -import { useExpose } from '../composition/use-expose'; import { usePageVisibility, useWindowSize } from '@vant/use'; +import { useRect } from '../composition/use-rect'; +import { useTouch } from '../composition/use-touch'; +import { useExpose } from '../composition/use-expose'; +import { useChildren } from '../composition/use-relation'; const [createComponent, bem] = createNamespace('swipe'); @@ -73,10 +73,10 @@ export default createComponent({ active: 0, swiping: false, }); - const children = reactive([]); const touch = useTouch(); const windowSize = useWindowSize(); + const { children, linkChildren } = useChildren(SWIPE_KEY); const count = computed(() => children.length); @@ -370,9 +370,9 @@ export default createComponent({ swipeTo, }); - provide(SWIPE_KEY, { size, props, count, children, activeIndicator }); + linkChildren({ size, props, count, activeIndicator }); - watch([children, () => props.initialSwipe], initialize); + watch([() => children.length, () => props.initialSwipe], initialize); watch( () => props.autoplay,