前言
收到需求,可监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键,可左右滑动!
效果
- 鼠标中键上下滑动时;
- 向上滑,向左移动;
- 向下滑,向右移动;
实现
- 代码
56 - 60
行,添加鼠标中键滑动监听事件; - 代码
61 - 65
行,删除鼠标中键滑动监听事件; - 代码
24 - 54
行,实现滑动;
vue
<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 scroll
const el = event.currentTarget.getElementsByClassName('el-tabs__nav-scroll')[0];
// 最大left:scrollWidth - 上一级的宽度。注意是scrollWidth
const 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) {// 不会大于最大 srcollLeft
this.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>