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

AvatarGiser2024-05-02 20:21

前言

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