js控制横向滚动条跟鼠标滚轮绑定

原创

已于 2022-10-12 15:14:02 修改 · 662 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

于 2022-10-12 15:14:00 首次发布

本文介绍了一个包含键盘键码值展示区域、可拖动调整大小的分隔条及带有自定义内容的可滚动Tab页组件。该组件使用Vue.js实现，支持通过鼠标滚轮进行Tab页的水平滚动。

<template>
	<div id="div">
		<!-- 左边元素 -->
		<div id="div1">
			字母和数字键的键码值(keyCode)
			按键 键码 按键 键码 按键 键码 按键 键码
			A 65 J 74 S 83 1 49
			B 66 K 75 T 84 2 50
			C 67 L 76 U 85 3 51
			D 68 M 77 V 86 4 52
			E 69 N 78 W 87 5 53
			F 70 O 79 X 88 6 54
			G 71 P 80 Y 89 7 55
			H 72 Q 81 Z 90 8 56
			I 73 R 82 0 48 9 57
		</div>
		<!-- 中间黄色拖动元素 -->
		<div id="div2" @mousedown="mousedown"></div>
		<!-- 右边元素 -->
		<div id="div3">
			<!-- tab页 -->
			<el-tabs class="tabRight" v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane v-for="(value,key,index) in tabData" :label="key" :name="key">
					{
  
  {value.key}}:{
  
  {value.value}}
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
&