寻求Vuetify中替代IntersectionObserver的滚动追踪内置指令

Vuetify中哪个指令可以实现与IntersectionObserver相同的滚动追踪功能？

我实现了一项功能：用户必须滚动到对话框底部才能点击「接受」按钮。但代码评审后要求我改用Vuetify的现有指令，我搜索了3小时仍未找到对应指令。

我的实现代码如下：

<template>
    <UIDialog
        :value="isVisible"
        :loading="loading"
        scrollable
        :persistent="!isAccepted"
        max-width="800px"
        actions-sticky-bottom
    >
        <template #content>
            <div v-html="licenseText" v-scroll="handleScroll"/>
            <div
                ref="scrollEndRef"
                class="scroll-end-marker"
            />
        </template>
        <template #actions>
            <UICheckbox
                v-if="!isAccepted"
                v-model="acceptIsChecked"
                :disabled="loading || !isScrolledToBottom"
                :label="$t('legal.i_accept')"
            />
            <UISpacer />
            <UIButton
                v-if="isAccepted"
                :text="$t('general.close')"
                color="primary"
                :disabled="loading"
                @click="close"
            />
            <UIButton
                v-else
                :text="$t('general.continue')"
                color="primary"
                :disabled="loading || !acceptIsChecked"
                @click="accept"
            />
        </template>
    </UIDialog>
</template>

<script lang="ts">
    import {
        computed,
        defineComponent, nextTick, onUnmounted,
        ref,
        watch,
    } from 'vue';
    import { useSettingStore } from '@/stores/setting';
    import api from '@/services/data';
    import UIButton from '@/components/UI/UIButton/UIButton.vue';
    import UICheckbox from '@/components/UI/UIForm/UICheckbox.vue';
    import UIDialog from '@/components/UI/UIDialog/UIDialog.vue';
    import UISpacer from '@/components/UI/UILayout/UISpacer.vue';

    export default defineComponent({
        components: {
            UISpacer,
            UIDialog,
            UICheckbox,
            UIButton,
        },
        setup() {
            const settingStore = useSettingStore();
            const loading = ref(false);
            const acceptIsChecked = ref(false);
            const licenseText = ref<string|null>(null);
            const isAccepted = computed(() => settingStore.eulaIsAccepted);
            const isVisible = computed(() => settingStore.eulaAcceptDialogIsVisible);

            const accept = async () => {
                const date = new Date();
                const isoDateTime = JSON.stringify(date.toISOString());
                loading.value = true;
                try {
                    await api.eula.setAcceptanceDate(isoDateTime);
                    settingStore.setEulaAcceptanceValue(acceptIsChecked.value);
                    settingStore.setEulaAcceptDialogVisibility(!acceptIsChecked.value);
                } catch {} finally {
                    loading.value = false;
                }
            };
            const close = () => {
                if (!isVisible.value) {
                    return;
                }
                settingStore.setEulaAcceptDialogVisibility(false);
            };
            const loadLicenseText = async () => {
                try {
                    loading.value = true;
                    const response = await api.eula.getLicenseText();
                    licenseText.value = response.data;
                } catch {} finally {
                    loading.value = false;
                }
            };

            const isScrolledToBottom = ref<boolean>(false);
            const scrollEndRef = ref(null);
            let observer: IntersectionObserver|null = null;
            const handleIntersection = (entries: IntersectionObserverEntry[]) => {
                entries.forEach((entry) => {
                    isScrolledToBottom.value = entry.isIntersecting;
                });
            };
            loadLicenseText();

            watch(() => isVisible.value, (value) => {
                if (value && !licenseText.value) {
                    loadLicenseText();
                }
            }, { immediate: true });

            watch(() => isVisible.value, (value) => {
                if (value) {
                    nextTick().then(() => {
                        if (scrollEndRef.value) {
                            observer = new IntersectionObserver(handleIntersection, { threshold: 1.0 });
                            observer.observe(scrollEndRef.value);
                        }
                    });
                }
            });

            onUnmounted(() => {
                if (observer && scrollEndRef.value) {
                    observer.unobserve(scrollEndRef.value);
                }
            });

            return {
                loading,
                acceptIsChecked,
                isAccepted,
                isVisible,
                licenseText,
                accept,
                close,
                isScrolledToBottom,
                onUnmounted,
                handleIntersection,
                scrollEndRef,
            };
        },
    });
</script>

我需要用Vuetify的内置指令替换当前的滚动追踪实现。

你需要使用Vuetify的**v-intersect**指令，它是对原生IntersectionObserver的封装，能直接实现元素可见性追踪，完全匹配你的需求。

修改步骤 #

1. 在滚动标记元素上添加v-intersect指令，绑定回调函数并配置阈值：

<div
    ref="scrollEndRef"
    class="scroll-end-marker"
    v-intersect="{ handler: handleIntersection, options: { threshold: 1.0 } }"
/>

2. 移除手动管理IntersectionObserver的冗余代码：
   • 删除observer变量定义
   • 删除监听isVisible创建Observer的watch逻辑
   • 删除onUnmounted中的Observer清理代码

修改后的完整代码 #

<template>
    <UIDialog
        :value="isVisible"
        :loading="loading"
        scrollable
        :persistent="!isAccepted"
        max-width="800px"
        actions-sticky-bottom
    >
        <template #content>
            <div v-html="licenseText"/>
            <div
                ref="scrollEndRef"
                class="scroll-end-marker"
                v-intersect="{ handler: handleIntersection, options: { threshold: 1.0 } }"
            />
        </template>
        <template #actions>
            <UICheckbox
                v-if="!isAccepted"
                v-model="acceptIsChecked"
                :disabled="loading || !isScrolledToBottom"
                :label="$t('legal.i_accept')"
            />
            <UISpacer />
            <UIButton
                v-if="isAccepted"
                :text="$t('general.close')"
                color="primary"
                :disabled="loading"
                @click="close"
            />
            <UIButton
                v-else
                :text="$t('general.continue')"
                color="primary"
                :disabled="loading || !acceptIsChecked"
                @click="accept"
            />
        </template>
    </UIDialog>
</template>

<script lang="ts">
    import {
        computed,
        defineComponent,
        ref,
        watch,
    } from 'vue';
    import { useSettingStore } from '@/stores/setting';
    import api from '@/services/data';
    import UIButton from '@/components/UI/UIButton/UIButton.vue';
    import UICheckbox from '@/components/UI/UIForm/UICheckbox.vue';
    import UIDialog from '@/components/UI/UIDialog/UIDialog.vue';
    import UISpacer from '@/components/UI/UILayout/UISpacer.vue';

    export default defineComponent({
        components: {
            UISpacer,
            UIDialog,
            UICheckbox,
            UIButton,
        },
        setup() {
            const settingStore = useSettingStore();
            const loading = ref(false);
            const acceptIsChecked = ref(false);
            const licenseText = ref<string|null>(null);
            const isAccepted = computed(() => settingStore.eulaIsAccepted);
            const isVisible = computed(() => settingStore.eulaAcceptDialogIsVisible);

            const accept = async () => {
                const date = new Date();
                const isoDateTime = JSON.stringify(date.toISOString());
                loading.value = true;
                try {
                    await api.eula.setAcceptanceDate(isoDateTime);
                    settingStore.setEulaAcceptanceValue(acceptIsChecked.value);
                    settingStore.setEulaAcceptDialogVisibility(!acceptIsChecked.value);
                } catch {} finally {
                    loading.value = false;
                }
            };
            const close = () => {
                if (!isVisible.value) {
                    return;
                }
                settingStore.setEulaAcceptDialogVisibility(false);
            };
            const loadLicenseText = async () => {
                try {
                    loading.value = true;
                    const response = await api.eula.getLicenseText();
                    licenseText.value = response.data;
                } catch {} finally {
                    loading.value = false;
                }
            };

            const isScrolledToBottom = ref<boolean>(false);
            const scrollEndRef = ref(null);
            const handleIntersection = (entries: IntersectionObserverEntry[]) => {
                entries.forEach((entry) => {
                    isScrolledToBottom.value = entry.isIntersecting;
                });
            };
            loadLicenseText();

            watch(() => isVisible.value, (value) => {
                if (value && !licenseText.value) {
                    loadLicenseText();
                }
            }, { immediate: true });

            return {
                loading,
                acceptIsChecked,
                isAccepted,
                isVisible,
                licenseText,
                accept,
                close,
                isScrolledToBottom,
                handleIntersection,
                scrollEndRef,
            };
        },
    });
</script>

关键说明 #

• v-intersect会自动完成Observer的创建、监听和销毁，无需手动调用observe或unobserve
• 配置项options与原生IntersectionObserver参数完全一致，这里设置threshold:1.0表示元素完全可见时触发回调
• 原有的handleIntersection函数无需修改，参数和逻辑完全兼容

内容的提问来源于stack exchange，提问作者FxReinhard