vue3-seamless-scroll 怎么开启 鼠标触碰 暂停

Vue3 Seamless Scroll是一个用于实现无缝滚动效果的插件，它通常适用于单页面应用中需要平滑滚动的内容区域。如果你想让这个滚动组件在鼠标触碰到内容区域时暂停滚动，你可以按照以下步骤操作：

1. 首先，确保你在项目中已经安装了`vue3-seamless-scroll`库。如果你还没有安装，可以在你的`package.json`中添加依赖：

   npm install vue3-seamless-scroll

或者

   yarn add vue3-seamless-scroll

2. 然后，在你的Vue组件模板里引入并初始化`SeamlessScroll`组件，并设置它的配置项。例如：

   <template>
     <seamless-scroll ref="scrollRef">
       <!-- 内容列表 -->
       <div v-for="item in items" :key="item.id"></div>
     </seamless-scroll>
   </template>

   <script setup>
   import { ref, onMounted } from 'vue';
   import SeamlessScroll from 'vue3-seamless-scroll';

   const items = ...; // 你的内容数据
   const scrollRef = ref(null);

   onMounted(() => {
     scrollRef.value.init({
       pauseOnHover: true, // 开启鼠标悬停时暂停滚动
     });
   });
   </script>

3. 在这里，我们设置了`pauseOnHover`选项为`true`，这意味着当鼠标悬停在滚动区域内时，滚动会暂停。

4. 如果你想进一步控制触碰事件，可以在`mounted`钩子里添加对应的事件监听器，比如在鼠标离开时恢复滚动：

   onMounted(() => {
     const handleMouseLeave = () => {
       scrollRef.value.resume(); // 当鼠标离开时，恢复滚动
     };
   
     document.addEventListener('mouseleave', handleMouseLeave);
     scrollRef.value.on('mouseout', handleMouseLeave); // 绑定无缝滚动的mouseout事件

     // 清理鼠标离开事件的监听
     scrollRef.value.$on('destroyed', () => {
       document.removeEventListener('mouseleave', handleMouseLeave);
     });
   });