Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dsk-operate-sys-cscec
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
fulixin
dsk-operate-sys-cscec
Commits
16c80870
Commit
16c80870
authored
Jan 11, 2024
by
huangjie
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
导航栏修改
parent
af29fa40
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
91 additions
and
58 deletions
+91
-58
all.png
dsk-operate-ui/src/assets/images/all.png
+0
-0
all_on.png
dsk-operate-ui/src/assets/images/all_on.png
+0
-0
lookmore.png
dsk-operate-ui/src/assets/images/index/lookmore.png
+0
-0
index.vue
dsk-operate-ui/src/layout/components/TagsView/index.vue
+91
-58
No files found.
dsk-operate-ui/src/assets/images/all.png
deleted
100644 → 0
View file @
af29fa40
206 Bytes
dsk-operate-ui/src/assets/images/all_on.png
deleted
100644 → 0
View file @
af29fa40
325 Bytes
dsk-operate-ui/src/assets/images/index/lookmore.png
0 → 100644
View file @
16c80870
167 Bytes
dsk-operate-ui/src/layout/components/TagsView/index.vue
View file @
16c80870
<
template
>
<div
id=
"tags-view-container"
class=
"tags-view-container"
>
<div
id=
"getviews"
>
<div
class=
"alltags"
v-if=
"visitedViews.length > 0"
>
<div
class=
"imgs"
@
click=
"closeall"
>
<img
src=
"@/assets/images/all.png"
v-if=
"!showall"
/>
<img
src=
"@/assets/images/all_on.png"
v-if=
"showall"
/>
<!--
<i
class=
"el-icon-arrow-down"
v-if=
"!showall"
></i>
<i
class=
"el-icon-arrow-up"
v-if=
"showall"
></i>
-->
</div>
<el-collapse-transition>
<div
class=
"tagslist"
:class=
"
{'noshow':!showall}">
<router-link
v-for=
"(tag, index) in visitedViews"
ref=
"tag"
:key=
"tag.fullPath"
:class=
"isActive(tag)?'active':''"
:to=
"
{ path: tag.fullPath, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@contextmenu.prevent.native="openMenu(tag,$event)">
<div
@
click=
"changetags"
>
<i
class=
"el-icon-check"
></i>
<span
:id=
"isActive(tag)?'tagTitles':''"
>
{{
tag
.
title
}}
</span>
</div>
</router-link>
<div
class=
"clasall"
@
click=
"closeAllTag(selectedTag)"
>
关闭全部标签
</div>
</div>
</el-collapse-transition>
</div>
<div
id=
"getviews"
ref=
"getviews"
>
<scroll-pane
ref=
"scrollPane"
class=
"tags-view-wrapper"
@
scroll=
"handleScroll"
>
<draggable
v-model=
"visitedViews"
:options=
"dragOptions"
@
end=
"end"
>
<router-link
v-for=
"(tag, index) in visitedViews"
ref=
"tag"
:key=
"tag.fullPath"
:class=
"isActive(tag)?'active':''"
...
...
@@ -29,10 +9,12 @@
<!--
<svg
:class=
"isActive(tag)?'tags-icon tags-icon-active':'tags-icon'"
aria-hidden=
"true"
>
-->
<!--
<use
:xlink:href=
"iconName(tag)"
/>
-->
<!--
</svg>
-->
<div
class=
"hoverclass"
>
<span
:id=
"isActive(tag)?'tagTitle':''"
>
{{
tag
.
title
.
replace
(
/<
[^
>
]
+>/g
,
''
)
}}
</span>
<span
v-if=
"!isAffix(tag)"
class=
"el-icon-close"
@
click
.
prevent
.
stop=
"closeSelectedTag(tag)"
/>
<i
:class=
"index!=visitedViews.length-1 && index != isActiveIndex() && index != isActiveIndex()-1?'tags-item-line':'tags-item-line item-color'"
/>
</div>
</router-link>
</draggable>
</scroll-pane>
...
...
@@ -44,16 +26,35 @@
<li
v-if=
"!isLastView()"
@
click=
"closeRightTags"
><i
class=
"el-icon-right"
></i>
关闭右侧
</li>
<li
@
click=
"closeAllTags(selectedTag)"
><i
class=
"el-icon-circle-close"
></i>
全部关闭
</li>
</ul>
<div
class=
"alltags"
v-if=
"visitedViews.length > 0 && havemore"
>
<div
class=
"imgs"
@
click=
"closeall"
:class=
"
{'showall':showall}">
<img
src=
"@/assets/images/index/lookmore.png"
/>
</div>
<el-collapse-transition>
<div
class=
"tagslist"
:class=
"
{'noshow':!showall}">
<router-link
v-for=
"(tag, index) in visitedViews"
ref=
"tag"
:key=
"tag.fullPath"
:class=
"isActive(tag)?'active':''"
:to=
"
{ path: tag.fullPath, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@contextmenu.prevent.native="openMenu(tag,$event)">
<div
@
click=
"changetags"
>
<i
class=
"el-icon-check"
></i>
<span
:id=
"isActive(tag)?'tagTitles':''"
>
{{
tag
.
title
}}
</span>
</div>
</router-link>
<div
class=
"clasall"
@
click=
"closeAllTag(selectedTag)"
>
关闭全部标签
</div>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</
template
>
<
script
>
import
draggable
from
'vuedraggable'
;
import
ScrollPane
from
'./ScrollPane'
;
import
path
from
'path'
;
import
draggable
from
'vuedraggable'
import
ScrollPane
from
'./ScrollPane'
import
path
from
'path'
export
default
{
export
default
{
components
:
{
ScrollPane
,
draggable
},
data
()
{
return
{
...
...
@@ -69,7 +70,8 @@ export default {
ghostClass
:
'ghost'
,
// 拖拽过程中占位元素的class名称
sort
:
true
,
// 是否启用排序功能
draggable
:
'.tags-view-item'
,
// 可拖拽元素的选择器
}
},
havemore
:
false
,
};
},
computed
:
{
...
...
@@ -105,6 +107,7 @@ export default {
this
.
addTags
();
this
.
moveToCurrentTag
();
this
.
getviews
();
this
.
getviewswidth
()
},
visible
(
value
)
{
if
(
value
)
{
...
...
@@ -118,6 +121,7 @@ export default {
this
.
$nextTick
(()
=>
{
this
.
initTags
();
this
.
addTags
();
this
.
getviewswidth
()
});
},
methods
:
{
...
...
@@ -139,6 +143,12 @@ export default {
});
sessionStorage
.
setItem
(
"views"
,
JSON
.
stringify
(
viewlist
));
},
getviewswidth
(){
let
fatherwidth
=
this
.
$refs
.
getviews
.
offsetWidth
-
6
let
viewlength
=
this
.
$store
.
state
.
tagsView
.
visitedViews
.
length
//是否超出了能展示最多的个数
this
.
havemore
=
fatherwidth
/
80
<
viewlength
},
changetags
()
{
this
.
showall
=
false
;
},
...
...
@@ -343,20 +353,26 @@ export default {
background
:
#fff
;
position
:
relative
;
::v-deep
.el-scrollbar__wrap
{
margin-left
:
64px
;
/*margin-left: 64px;*/
margin-left
:
12px
;
padding-top
:
20px
;
}
.tags-view-wrapper
{
::v-deep
.el-scrollbar__view
{
>
div
{
display
:
flex
;}
}
.tags-view-item
{
display
:
inline-block
;
position
:
relative
;
cursor
:
pointer
;
min-width
:
128px
;
height
:
32px
;
line-height
:
32px
;
color
:
#495060
;
height
:
36px
;
line-height
:
36px
;
color
:
rgba
(
35
,
35
,
35
,
0
.4
);
background
:
#fff
;
padding
:
0
20px
0
8px
;
font-size
:
12px
;
max-width
:
140px
;
min-width
:
80px
;
flex
:
1
1
0px
;
.tags-icon
{
width
:
16px
;
height
:
16px
;
...
...
@@ -370,11 +386,11 @@ export default {
.tags-item-line
{
display
:
block
;
width
:
1px
;
height
:
2
4px
;
height
:
1
4px
;
background
:
#d0d1d9
;
position
:
absolute
;
right
:
0
;
top
:
4
px
;
top
:
9
px
;
z-index
:
2
;
&
.item-color
{
background
:
#ffffff
;
...
...
@@ -383,23 +399,31 @@ export default {
/*&:first-of-type {*/
/*margin-left: 64px;*/
/*}*/
.hoverclass
{
padding
:
0
20px
0
8px
;
height
:
28px
;
line-height
:
28px
;
margin
:
4px
;
width
:
calc
(
100%
-
8px
);
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
border-radius
:
4px
;
&
:hover
{
.el-icon-close
{
background-color
:
rgba
(
153
,
153
,
153
,
0
.3
);
color
:
#999999
;
background
:
#F5F5F5
;
color
:
#232323
;
}
}
.el-icon-close
:hover
{
background
:
#EEEEEE
;;
color
:
#999999
;
}
&
.active
{
background-color
:
#f5f5f5
;
color
:
#232323
;
border-top-left-radius
:
10px
;
border-top-right-radius
:
10px
;
&
:hover
{
.el-icon-close
{
background-color
:
initial
;
color
:
initial
;
}
}
}
}
}
...
...
@@ -428,9 +452,9 @@ export default {
position
:
absolute
;
align-items
:
center
;
justify-content
:
center
;
width
:
24
px
;
height
:
24
px
;
left
:
2
4px
;
width
:
16
px
;
height
:
16
px
;
right
:
-3
4px
;
top
:
28px
;
cursor
:
pointer
;
text-align
:
center
;
...
...
@@ -438,15 +462,23 @@ export default {
&
:
:
after
{
content
:
" "
;
position
:
absolute
;
border-right
:
1px
solid
#efefef
;
height
:
18px
;
width
:
0
;
top
:
3px
;
right
:
-8px
;
}
.imgs
>
img
{
width
:
24px
;
height
:
24px
;
.imgs
{
border-radius
:
4px
;
&
:hover
{
background
:
#EEEEEE
;
}
>
img
{
width
:
16px
;
}
}
.showall
{
background
:
#EEEEEE
;
}
.tagslist
{
transition
:
all
0
.2s
;
...
...
@@ -521,8 +553,8 @@ export default {
.tags-view-item
{
.el-icon-close
{
position
:
absolute
;
right
:
5
px
;
top
:
8
px
;
right
:
9
px
;
top
:
10
px
;
width
:
16px
;
height
:
16px
;
vertical-align
:
2px
;
...
...
@@ -533,9 +565,10 @@ export default {
&
:before
{
transform
:
scale
(
0
.95
);
display
:
inline-block
;
vertical-align
:
-
2
.5px
;
vertical-align
:
-
1
.5px
;
}
}
}
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment