Vue阅读协议，滑动到底部才可以点击下一步

这种场景比较常见，很多买保险的页面，什么合同页面都是这么搞的，我滑动到底才能点下一步

演示网址：https://vue.cctv3.net/#/hasReadHTML

首先要打一个标记 📌，这个div显示的时候就证明到底部了

<template>
  <div class="aggrement">
    <div v-html="html" />
    <div ref="lastElement" class="section" />
  </div>
</template>

import { useElementVisibility } from "@vueuse/core";
const lastElement = ref();
const targetIsVisible = useElementVisibility(lastElement);

这个时候有两个问题：

1. 因为我是动态加载的html，所以我的html还请求回来的时候，targetIsVisible: true

2. 当我html加载完了，把他压到最底部了，他又是false了

3. 当我滑动到最底端并且又滑回去了，这个时候targetIsVisible: false -> true -> false

所以只搞一个targetIsVisible是不够的，要想html内容请求完，并且有一次滑动到底就算成功，还要搞两个变量。

• isLoaded 网页html请求完了

• isAlreadyReaded 是否读过，将来emits就是通知的这个变量

所以网页请求完了，加一个 1 秒延时，isLoaded: true加载完了。

onMounted(() => {
  fetch(`/docs/${props.file}`)
    .then((response) => response.text())
    .then((text) => {
      html.value = text;
      setTimeout(() => {
        isLoaded.value = true;
      }, 1000);
    });
});

监听两个变量，如果isAlreadyReaded: false -> 没读过，targetIsVisible: true -> 有一次读完了，isLoaded: true -> 请求的html加载完了，这个时候就isAlreadyReaded: true，以后不管再怎么操作就不管了，反正我曾经已经读过了

watch([targetIsVisible, isLoaded], ([visible, loaded]) => {
  if (!isAlreadyReaded.value && visible && loaded) {
    isAlreadyReaded.value = true;
  }
});

这个时候，通知父组件

watch(isAlreadyReaded, (iar) => {
  emits("lastPage", iar);
});

就玩活儿了 …