《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）

本文主要是介绍《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

收到需求，可监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！

效果

• 鼠标中键上下滑动时；
• 向上滑，向左移动；
• 向下滑，向右移动；

实现

• 代码56 - 60行，添加鼠标中键滑动监听事件；
• 代码61 - 65行，删除鼠标中键滑动监听事件；
• 代码24 - 54行，实现滑动；

<template><div><el-tabs id="myTabs" v-model="activeName" type="card" ><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane><el-tab-pane label="测试01" name="01">测试01</el-tab-pane><el-tab-pane label="测试02" name="02">测试02</el-tab-pane><el-tab-pane label="测试03" name="03">测试03</el-tab-pane><el-tab-pane label="测试04" name="04">测试04</el-tab-pane></el-tabs></div>
</template>
<script>
export default {data() {return {activeName: 'first',currentScrollLeft: 0,};},methods: {tabsMouseWheel(event) {// 阻止默认行为（例如，阻止页面自动滚动）  event.preventDefault();  // tabs scrollconst el = event.currentTarget.getElementsByClassName('el-tabs__nav-scroll')[0];// 最大left：scrollWidth - 上一级的宽度。注意是scrollWidthconst maxLeft = el.scrollWidth - el.offsetWidth;// 设置每次滚动的移动量const speed = 30;   if (event.deltaY < 0) {  // 向上滚动，向左移动div  this.currentScrollLeft -= speed;  } else {  // 向下滚动，向右移动div  this.currentScrollLeft += speed;  } // 保证scrollLeft不会小于0  if (this.currentScrollLeft < 0) {  this.currentScrollLeft = 0;  } else if(maxLeft < this.currentScrollLeft) {// 不会大于最大 srcollLeftthis.currentScrollLeft = maxLeft;}// 更新div的位置  el.scrollLeft = this.currentScrollLeft; },},mounted() {// 添加监听const navScrollEl = document.querySelector('#myTabs .el-tabs__header');navScrollEl.addEventListener('wheel', this.tabsMouseWheel);},beforeDestroy() {// 删除监听const navScrollEl = document.querySelector('#myTabs .el-tabs__header');navScrollEl.removeEventListener('wheel', this.tabsMouseWheel);}
};
</script>
<<style lang="stylus">
#myTabs {width: 350px;
}
</style>

这篇关于《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---