实现自定义指令 v-scrollBar，用于动态显示/隐藏滚动条，提升用户体验

// src/directives/scrollbar.js export default { mounted(el, binding) { // 初始化滚动条状态 hideScrollbar(el); // 添加滚动事件监听 let scrollTimer = null; const handleScroll = () => { // 显示滚动条 showScrollbar(el); // 清除之前的定时器 if (scrollTimer) { clearTimeout(scrollTimer); } // 设置新的定时器，在停止滚动后隐藏滚动条 scrollTimer = setTimeout(() => { hideScrollbar(el); }, binding.value || 1000); // 默认1秒后隐藏，可通过指令参数自定义 }; // 保存定时器引用到元素上，便于销毁时清理 el._scrollTimer = scrollTimer; el._scrollHandler = handleScroll; // 绑定滚动事件 el.addEventListener('scroll', handleScroll); }, unmounted(el) { // 清理事件监听和定时器 if (el._scrollHandler) { el.removeEventListener('scroll', el._scrollHandler); } if (el._scrollTimer) { clearTimeout(el._scrollTimer); } } }; // 显示滚动条的函数 function showScrollbar(el) { el.classList.add('show-scrollbar'); } // 隐藏滚动条的函数 function hideScrollbar(el) { el.classList.remove('show-scrollbar'); }

使用

<div class="record-wrap" v-scrollBar> <DynamicRecordSuvery :flag="flag" :messageId="messageId" :thoughtContents="thoughtContent" @getItem="getItem" /> </div>

.record-wrap { flex-grow: 1; overflow-y: auto; margin-bottom: 10px; padding: 15px; /* 隐藏默认滚动条 */ scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .record-box { width: 100%; } } /* 显示滚动条（指令添加.show-scrollbar时） */ .record-wrap.show-scrollbar { scrollbar-width: thin; &::-webkit-scrollbar { display: block; width: 8px; } }