前言
收到需求，可监听 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>
