vue 瞄点

在Vue项目中，您可以使用现有的瞄点库或自己编写代码来实现瞄点功能。下面是一个在Vue项目中使用vue-scrollactive库实现瞄点的示例。

安装vue-scrollactive库：

npm install vue-scrollactive --save

在Vue组件中引入vue-scrollactive库：

import VueScrollactive from 'vue-scrollactive';

将vue-scrollactive库注册为Vue插件：

Vue.use(VueScrollactive);

在模板中添加一个具有v-scrollactive指令的导航菜单，并指定要突出显示的类名和偏移量：

<ul>
  <li><a href="#section1" v-scrollactive="{offset: -50, class: 'active'}">Section 1</a></li>
  <li><a href="#section2" v-scrollactive="{offset: -50, class: 'active'}">Section 2</a></li>
  <li><a href="#section3" v-scrollactive="{offset: -50, class: 'active'}">Section 3</a></li>
</ul>

在这个例子中，v-scrollactive指令接收一个对象，其中offset属性指定滚动时偏移量，class属性指定要添加到活动部分上的类名。这将在滚动时检查每个链接指定的瞄点元素是否可见，并在元素可见时添加类名，以突出显示导航菜单中的相应部分。

在每个需要作为瞄点的元素上添加一个id属性，例如：

<h2 id="section1">Section 1</h2>
<h2 id="section2">Section 2</h2>
<h2 id="section3">Section 3</h2>

这将使链接可以正确地链接到每个瞄点元素。

这个例子中，使用vue-scrollactive库来实现瞄点功能非常简单。您只需要为导航菜单中的每个链接添加v-scrollactive指令，并在每个瞄点元素上添加一个id属性即可。