[JavaScript知识库]element ui tabs-tab页放到右边、侧边

1. 右边有哪些tab页和有哪些数据是后台反的数据、并且黄色的部分可以拖动改变两边的大小
   
2. 现在想把右侧的tab页靠右边、官网提供的靠右是这样的
   
3. 现在想实现成这样 还有上下调整的功能
   

<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">
					<!-- 重写tab页头部  不重写的话旋转后tab页的头部中文字是向侧面的 -->
					<template v-slot:label>
						<!-- 高度根据tab页头部字数设置 -->
						<div :style="{'width':(key.length * 18)+'px'}">
							<!-- 设置 position 属性否则旋转不管用  left:字的位置 18每个字之间的间距  -->
							<span class="tabSpan" v-for="(v,index2) in key" :style="{'position':'absolute','left':(index2+1)*18+'px'}">{{v}}</span>
						</div>
					</template>
					{{value.key}}:{{value.value}}
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: '',
				tabData: {},
			};
		},
		mounted() {
			// 获取后台tab页数据可从后台查询
			this.getTabList();
		},
		methods: {
			getTabList() {
				// 获取后台tab页数据可从后台查询
				this.tabData = {
					"用户管理": {
						"key": "用户管理",
						"value": "用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理"
					},
					"配置管理": {
						"key": "配置管理",
						"value": "配置管理"
					},
					"角色管理": {
						"key": "角色管理",
						"value": "角色管理"
					},
					"定时任务补偿": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿1": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿2": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿3": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿4": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
				}
				// 获取到数据后默认选择第一个
				for (var tab in this.tabData) {
					this.activeName = tab;
					break;
				}
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 中间拖动黄色的调整两边大小
			mousedown(e) {
				// 父级框的宽度
				let divWidth = document.getElementById("div").clientWidth;
				//添加鼠标移动事件
				document.onmousemove = function(e) {
					// 防止链接打开 URL
					e.preventDefault();
					// e.clientX是鼠标指针相对于浏览器页面（或客户区）的水平坐标
					// 可以理解为鼠标距离屏幕左侧的距离
					// 当鼠标距离左面大于300和鼠标位置小于父级总长度-220
					//就是控制左面和右边两个的最小宽度
					if (e.clientX > 300 && e.clientX < (divWidth - 220)) {
						//设置左面的大小
						document.getElementById("div1").style.width = (e.clientX + "px");
						//设置右边的大小
						document.getElementById("div3").style.width = ((divWidth - e.clientX - 10) + "px");
					}
				}
				document.onmouseup = function(e) {
					document.onmousemove = null;
					document.onmouseup = null;
				}
			}
		}
	}
</script>
<!-- scoped="scoped" -->
<style>
	/* tab页内容右边边距 */
	.tabRight {
		padding-right: 7vh;
	}
	/* tab页内容右边边距 */
	.tabRight .tabSpan {
		margin: 0px;
		transform: rotate(-90deg);
	}
	/* tab页内容高度 */
	.tabRight>.el-tabs__content {
		height: 75vh;
		overflow: auto;
	}
	/* 将横着的tab页头部旋转到右边 */
	.tabRight>.el-tabs__header.is-top {
		transform: rotate(90deg);
		/* 旋转后宽就是tab页头部的高度 */
		width: 75vh;
		position: absolute;
		/* 页面距离屏幕右边距离 根据width调整位置 */
		/* 如果想要靠坐就调整 left: -33vh; */
		right: -33vh;
		/* 页面距离屏幕右边距离 根据width调整位置 */
		top: 36vh;
		z-index: 2;
	}
	#div {
		height: 600px;
		background-color: #55aaff;
	}
	#div>div {
		float: left;
	}
	#div1 {
		height: 500px;
		width: 80%;
		background-color: #00ff00;
	}
	#div2 {
		height: 500px;
		width: 10px;
		background-color: #ffff00;
		cursor: w-resize;
	}
	#div3 {
		height: 500px;
		width: calc(20% - 10px);
		background-color: #aa00ff;
	}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖