element ui tabs-tab页放到右边、侧边
- 右边有哪些tab页和有哪些数据是后台反的数据、并且黄色的部分可以拖动改变两边的大小
- 现在想把右侧的tab页靠右边、官网提供的靠右是这样的
- 现在想实现成这样 还有上下调整的功能(注：下方代码中无上下调整功能的按钮，右侧的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>
</template>
<script>
export default {
data() {
return {
activeName: '',
tabData: {},
};
},
watch:{
tabData:function(newVal){
if(newVal != null && newVal != ""){
setTimeout(()=>{
var tabs = $(".tabRight .el-tabs__item")
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i]
var text = tab.textContent
var htmlStr = ""
for(var char of text){
htmlStr = htmlStr+"<div style='float:left;transform:rotate(-90deg);padding:0px 5px;'>"+char+"</div>";
}
tab.textContent = ""
tab.innerHTML = htmlStr
tab.style.width = text.length * 25 +'px'
tab.style.padding = '0px'
tab.style.margin = '0px'
}
// 右侧tab页滚动条绑定滚轮不用可以注释掉下面方法（下面css样式中也有一个地方）
let tabContainer = document.querySelector(".tabRight .el-tabs__nav-scroll")
tabContainer.addEventListener("wheel",(e) =>{
e.preventDefault();
tabContainer.scrollLeft += e.deltaY
})
},10)
}
},
},
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: 63vh;
overflow: auto;
}
/* 将横着的tab页头部旋转到右边 */
.tabRight>.el-tabs__header.is-top {
transform: rotate(90deg);
/* 旋转后宽就是tab页头部的高度 */
width: 63vh;
position: absolute;
/* 页面距离屏幕右边距离 根据width调整位置 */
right: -27vh;
/* 页面距离屏幕上边距离 根据width调整位置 */
top: 30vh;
z-index: 2;
}
/* 下面的是让右侧的tab页跟鼠标滚动关联 不要可以去掉 */
/* 右侧tab页显示滚动条 隐藏上下箭头 */
.tabRight .el-tabs__nav-scroll{
overflow: auto;
}
.tabRight .el-tabs__nav-prev{
display: none !important;
}
.tabRight .el-tabs__nav-next{
display: none !important;
}
/* 右侧不需要滚动条的 需要上下箭头的可以把中间的这一段去掉 */
#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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
