From 5c5eccdb11df86dbd0200ffa316cddb7a671d839 Mon Sep 17 00:00:00 2001
From: 李林 <z1292839451@163.com>
Date: 星期六, 23 十二月 2023 23:11:26 +0800
Subject: [PATCH] 框架引入
---
src/view/index.vue | 144 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 113 insertions(+), 31 deletions(-)
diff --git a/src/view/index.vue b/src/view/index.vue
index 4ba58ec..342b566 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -62,6 +62,16 @@
padding: 20px 0;
transition: .3s;
overflow-y: auto;
+ user-select: none;
+ }
+
+ .left::-webkit-scrollbar {
+ width: 0px;
+ }
+
+ .left::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 3px;
}
.left .box {
@@ -87,8 +97,8 @@
}
.left .box i {
- font-size: 32px;
- margin-bottom: 8px;
+ font-size: 28px;
+ margin-bottom: 4px;
}
.left .box div {
@@ -177,6 +187,10 @@
user-select: none;
flex-shrink: 0;
}
+
+ .tab:hover{
+ color: #3A7BFA;
+ }
.tab i {
font-size: 12px;
@@ -204,10 +218,36 @@
width: 100%;
height: 100%;
}
+
+ .right_key_menu {
+ width: 120px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
+ z-index: 999;
+ }
+
+ .right_key_menu li {
+ list-style-type: none;
+ padding: 5px 0;
+ padding-left: 10px;
+ font-size: 0.9rem;
+ transition: .5s;
+ cursor: pointer;
+ }
+
+ .right_key_menu li i{
+ margin-right: 20px;
+ }
+
+ .right_key_menu li:hover {
+ background-color: #dedede;
+ }
</style>
<style></style>
<template>
- <div class="all">
+ <div class="all" @click="closeRightKey">
<div class="title">
<div class="logo">
<!-- <img src="../../static/img/logo 1.png" /> -->
@@ -244,7 +284,7 @@
<i :class="`${leftOpen?'el-icon-s-unfold':'el-icon-s-fold'}`" @click="leftOpen = !leftOpen"></i>
<div class="tabs">
<div :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`" v-for="(a, ai) in tabs" :key="ai"
- @click="upTabActive(a.k)">
+ @click="upTabActive(a.k)" @contextmenu.prevent="rightKeyMenu(ai, $event)">
{{ a.v }}
<i class="el-icon-close" @click="removeTab(ai)" v-if="tabActive!=0"></i>
</div>
@@ -252,10 +292,22 @@
<i class="el-icon-delete" @click="allDel" title="鍒犻櫎鎵�鏈夋爣绛鹃〉"></i>
</div>
<div class="component_view">
- <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="upIndex + '|' + index"
- v-show="com.k == tabActive">
+ <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="index"
+ v-show="com.k == tabActive" :ref="`com-${com.k}`">
</component>
</div>
+ </div>
+ <!-- 鍙抽敭鑿滃崟 -->
+ <div class="right_key_menu">
+ <el-col :span="24">
+ <el-card :body-style="{padding: '6px 0'}">
+ <ul>
+ <li style="color: red;" @click="removeTab(activeIndex)"><i class="el-icon-close"></i>鍏抽棴</li>
+ <el-divider></el-divider>
+ <li @click="refreshTable"><i class="el-icon-refresh"></i>鍒锋柊</li>
+ </ul>
+ </el-card>
+ </el-col>
</div>
</div>
</template>
@@ -280,89 +332,93 @@
menu: [{
k: 0,
v: "棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 0,
v: "棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
},
{
k: 2,
v: "鏁版嵁涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 2,
v: "鏁版嵁涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
+ i: "font icon-a-Group1124",
+ u: "data-reporting"
}]
},
{
k: 3,
v: "鏁版嵁缁熻",
- i: "font icon-shouye",
- self: true,
+ i: "font icon-a-Group1124",
c: [{
- k: 3,
- v: "鏁版嵁缁熻",
- i: "font icon-shouye",
+ k: 9,
+ v: "椤圭洰鏁版嵁缁熻",
+ i: "font icon-a-Group1124",
+ u: "index-index"
+ },{
+ k: 10,
+ v: "鍛樺伐鏁版嵁缁熻",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
},
{
k: 5,
v: "杩涚矇涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 5,
v: "杩涚矇涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
},
{
k: 6,
v: "璐㈠姟涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 6,
v: "璐㈠姟涓婃姤",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
},
{
k: 7,
v: "瑙掕壊绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 7,
v: "瑙掕壊绠＄悊",
- i: "font icon-shouye",
- u: "index-index"
+ i: "font icon-a-Group1124",
+ u: "role-manage"
}]
},
{
k: 4,
v: "鏁版嵁瀛楀吀",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
c: [{
k: 4,
v: "瀹㈡埛绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: ""
},
{
k: 5,
v: "鐥呯绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: ""
}
]
@@ -370,12 +426,12 @@
{
k: 8,
v: "浜哄憳绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
self: true,
c: [{
k: 8,
v: "浜哄憳绠＄悊",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "person-manage"
}]
}
@@ -386,10 +442,11 @@
tabs: [{
k: 0,
v: "棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}],
- upIndex: 0
+ upIndex: 0,
+ activeIndex: 0
};
},
created() {},
@@ -425,7 +482,7 @@
this.tabs = [{
k: 0,
v: " 棣栭〉",
- i: "font icon-shouye",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
},
@@ -445,6 +502,31 @@
sessionStorage.clear();
localStorage.removeItem("autoenter");
this.$router.push("/enter");
+ },
+ // 鍏抽棴鍙抽敭鑿滃崟
+ closeRightKey() {
+ $('.right_key_menu').css({
+ 'display': 'none'
+ })
+ },
+ // 鍙抽敭鑿滃崟
+ rightKeyMenu(id, e) {
+ if (id == 0) return
+ this.activeIndex = id
+ var x = e.clientX + 'px'
+ var y = e.clientY + 'px'
+ $('.right_key_menu').css({
+ 'top': y,
+ 'left': x,
+ 'display': 'block'
+ })
+ },
+ // 鍒锋柊琛ㄦ牸鍐呭
+ refreshTable(){
+ var thing = this.tabs.splice(this.activeIndex, 1)
+ setTimeout(()=>{
+ this.tabs.splice(this.activeIndex, 0, thing[0])
+ }, 0)
}
}
};
--
Gitblit v1.9.3