Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
e142bdf9
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e142bdf9
编写于
12月 30, 2021
作者:
有
有来技术
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(TagsView): tagsView改造setup
上级
39f93d47
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
91 addition
and
106 deletion
+91
-106
src/layout/components/TagsView/ScrollPane.vue
src/layout/components/TagsView/ScrollPane.vue
+66
-69
src/layout/components/TagsView/index.vue
src/layout/components/TagsView/index.vue
+25
-37
未找到文件。
src/layout/components/TagsView/ScrollPane.vue
浏览文件 @
e142bdf9
<
template
>
<el-scrollbar
ref=
"scrollContainer"
:vertical=
"false"
class=
"scroll-container"
@
wheel.native.prevent=
"handleScroll"
>
<el-scrollbar
ref=
"scrollContainerRef"
:vertical=
"false"
class=
"scroll-container"
@
wheel.prevent=
"handleScroll"
>
<slot/>
</el-scrollbar>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
reactive
,
ref
,
toRefs
,
computed
,
onMounted
,
onBeforeUnmount
,
getCurrentInstance
}
from
"
vue
"
;
export
default
defineComponent
({
emits
:
[
'
scroll
'
],
setup
(
_
,
context
)
{
const
scrollContainer
=
ref
(
null
)
const
scrollWrapper
=
computed
(()
=>
{
return
(
scrollContainer
.
value
as
any
).
$refs
.
wrap
as
HTMLElement
})
const
{
ctx
}
=
getCurrentInstance
()
as
any
const
tagAndTagSpacing
=
4
const
state
=
reactive
({
handleScroll
:
(
e
:
WheelEvent
)
=>
{
const
eventDelta
=
(
e
as
any
).
wheelDelta
||
-
e
.
deltaY
*
40
scrollWrapper
.
value
.
scrollLeft
=
scrollWrapper
.
value
.
scrollLeft
+
eventDelta
/
4
},
moveToCurrentTag
:
(
currentTag
:
HTMLElement
)
=>
{
const
container
=
(
scrollContainer
.
value
as
any
).
$el
as
HTMLElement
const
containerWidth
=
container
.
offsetWidth
const
tagList
=
ctx
.
$parent
.
$refs
.
tag
as
any
[]
let
firstTag
=
null
let
lastTag
=
null
// find first tag and last tag
if
(
tagList
.
length
>
0
)
{
firstTag
=
tagList
[
0
]
lastTag
=
tagList
[
tagList
.
length
-
1
]
}
if
(
firstTag
===
currentTag
)
{
scrollWrapper
.
value
.
scrollLeft
=
0
}
else
if
(
lastTag
===
currentTag
)
{
scrollWrapper
.
value
.
scrollLeft
=
scrollWrapper
.
value
.
scrollWidth
-
containerWidth
}
else
{
// find preTag and nextTag
const
currentIndex
=
tagList
.
findIndex
(
item
=>
item
===
currentTag
)
const
prevTag
=
tagList
[
currentIndex
-
1
]
const
nextTag
=
tagList
[
currentIndex
+
1
]
// the tag's offsetLeft after of nextTag
const
afterNextTagOffsetLeft
=
nextTag
.
$el
.
offsetLeft
+
nextTag
.
$el
.
offsetWidth
+
tagAndTagSpacing
// the tag's offsetLeft before of prevTag
const
beforePrevTagOffsetLeft
=
prevTag
.
$el
.
offsetLeft
-
tagAndTagSpacing
if
(
afterNextTagOffsetLeft
>
scrollWrapper
.
value
.
scrollLeft
+
containerWidth
)
{
scrollWrapper
.
value
.
scrollLeft
=
afterNextTagOffsetLeft
-
containerWidth
}
else
if
(
beforePrevTagOffsetLeft
<
scrollWrapper
.
value
.
scrollLeft
)
{
scrollWrapper
.
value
.
scrollLeft
=
beforePrevTagOffsetLeft
}
}
}
})
const
emitScroll
=
()
=>
{
context
.
emit
(
'
scroll
'
)
}
<
script
setup
lang=
"ts"
>
import
{
ref
,
computed
,
onMounted
,
onBeforeUnmount
,
getCurrentInstance
}
from
"
vue
"
;
import
{
tagsViewStoreHook
}
from
"
@store/modules/tagsView
"
;
const
tagAndTagSpacing
=
ref
(
4
)
const
scrollContainerRef
=
ref
(
null
)
const
emits
=
defineEmits
()
const
emitScroll
=
()
=>
{
emits
(
'
scroll
'
)
}
const
{
ctx
}
=
getCurrentInstance
()
const
scrollWrapper
=
computed
(()
=>
{
return
(
scrollContainerRef
.
value
as
any
).
$refs
.
wrap
as
HTMLElement
})
onMounted
(()
=>
{
console
.
log
(
'
scrollWrapper
'
,
scrollWrapper
.
value
)
//scrollWrapper.value.addEventListener('scroll', emitScroll, true);
})
onBeforeUnmount
(()
=>
{
// scrollWrapper.value.removeEventListener('scroll', emitScroll);
})
onMounted
(()
=>
{
//scrollWrapper.value.addEventListener('scroll', emitScroll, true)
})
function
handleScroll
(
e
:
WheelEvent
)
{
const
eventDelta
=
(
e
as
any
).
wheelDelta
||
-
e
.
deltaY
*
40
scrollWrapper
.
value
.
scrollLeft
=
scrollWrapper
.
value
.
scrollLeft
+
eventDelta
/
4
}
function
moveToCurrentTag
(
currentTag
:
HTMLElement
)
{
const
container
=
(
scrollContainerRef
.
value
as
any
).
$el
as
HTMLElement
const
containerWidth
=
container
.
offsetWidth
const
tagList
=
ctx
.
$parent
.
$refs
.
tag
as
any
[]
let
firstTag
=
null
let
lastTag
=
null
if
(
tagList
.
length
>
0
)
{
firstTag
=
tagList
[
0
]
lastTag
=
tagList
[
tagList
.
length
-
1
]
}
if
(
firstTag
===
currentTag
)
{
scrollWrapper
.
value
.
scrollLeft
=
0
}
else
if
(
lastTag
===
currentTag
)
{
scrollWrapper
.
value
.
scrollLeft
=
scrollWrapper
.
value
.
scrollWidth
-
containerWidth
}
else
{
const
currentIndex
=
tagList
.
findIndex
(
item
=>
item
===
currentTag
)
const
prevTag
=
tagList
[
currentIndex
-
1
]
const
nextTag
=
tagList
[
currentIndex
+
1
]
onBeforeUnmount
(()
=>
{
//scrollWrapper.value.removeEventListener('scroll', emitScroll)
})
// the tag's offsetLeft after of nextTag
const
afterNextTagOffsetLeft
=
nextTag
.
$el
.
offsetLeft
+
nextTag
.
$el
.
offsetWidth
+
tagAndTagSpacing
.
value
// the tag's offsetLeft before of prevTag
const
beforePrevTagOffsetLeft
=
prevTag
.
$el
.
offsetLeft
-
tagAndTagSpacing
.
value
return
{
scrollContainer
,
...
toRefs
(
state
)
if
(
afterNextTagOffsetLeft
>
scrollWrapper
.
value
.
scrollLeft
+
containerWidth
)
{
scrollWrapper
.
value
.
scrollLeft
=
afterNextTagOffsetLeft
-
containerWidth
}
else
if
(
beforePrevTagOffsetLeft
<
scrollWrapper
.
value
.
scrollLeft
)
{
scrollWrapper
.
value
.
scrollLeft
=
beforePrevTagOffsetLeft
}
}
}
)
}
</
script
>
<
style
lang=
"scss"
scoped
>
.scroll-container
{
.el-scrollbar__bar
{
...
...
src/layout/components/TagsView/index.vue
浏览文件 @
e142bdf9
<
template
>
<div
id=
"tags-view-container"
class=
"tags-view-container"
>
<scroll-pane
ref=
"scrollPane"
class=
"tags-view-wrapper"
@
scroll=
"handleScroll"
>
<scroll-pane
ref=
"scrollPane
Ref
"
class=
"tags-view-wrapper"
@
scroll=
"handleScroll"
>
<router-link
v-for=
"tag in visitedViews"
ref=
"tag"
...
...
@@ -13,11 +13,9 @@
@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{
tag
.
meta
.
title
}}
<span
v-if=
"!isAffix(tag)"
@
click.prevent.stop=
"closeSelectedTag(tag)"
>
<el-icon
:size=
"8"
>
<close
/>
</el-icon>
</span>
<span
v-if=
"!isAffix(tag)"
class=
"el-icon-close"
@
click.prevent.stop=
"closeSelectedTag(tag)"
/>
</router-link>
</scroll-pane>
<ul
v-show=
"visible"
:style=
"
{left:left+'px',top:top+'px'}" class="contextmenu">
...
...
@@ -29,27 +27,25 @@
</div>
</
template
>
<
script
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
Close
}
from
'
@element-plus/icons
'
import
{
tagsViewStoreHook
}
from
'
@/store/modules/tagsView
'
import
{
usePermissionStoreHook
}
from
'
@/store/modules/Permission
'
import
ScrollPane
from
'
./ScrollPane.vue
'
import
path
from
'
path-browserify
'
import
{
defineComponent
,
computed
,
getCurrentInstance
,
nextTick
,
onBeforeMount
,
reactive
,
ref
,
toRefs
,
watch
}
from
"
vue
"
;
import
{
defineComponent
,
computed
,
getCurrentInstance
,
nextTick
,
onBeforeMount
,
reactive
,
ref
,
toRefs
,
watch
}
from
"
vue
"
;
import
{
RouteRecordRaw
,
useRoute
,
useRouter
}
from
'
vue-router
'
import
{
TagView
}
from
"
@store/interface
"
;
import
ScrollPane
from
'
./ScrollPane.vue
'
import
{
Close
}
from
'
@element-plus/icons
'
const
{
ctx
}
=
getCurrentInstance
()
as
any
const
router
=
useRouter
()
const
route
=
useRoute
();
const
visitedViews
=
computed
(()
=>
tagsViewStoreHook
().
visitedViews
)
const
routes
=
computed
(()
=>
usePermissionStoreHook
().
routes
)
export
default
defineComponent
({
components
:
{
ScrollPane
,
Close
},
setup
()
{
...
...
@@ -232,14 +228,13 @@ export default defineComponent({
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
'scss'
scoped
>
.tags-view-container
{
height
:
34px
;
width
:
100%
;
background
:
#fff
;
border-bottom
:
1px
solid
#d8dce5
;
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
.12
)
,
0
0
3px
0
rgba
(
0
,
0
,
0
,
.04
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0
.12
)
,
0
0
3px
0
rgba
(
0
,
0
,
0
,
0
.04
);
.tags-view-wrapper
{
.tags-view-item
{
display
:
inline-block
;
...
...
@@ -254,22 +249,18 @@ export default defineComponent({
font-size
:
12px
;
margin-left
:
5px
;
margin-top
:
4px
;
&
:first-of-type
{
margin-left
:
15px
;
}
&
:last-of-type
{
margin-right
:
15px
;
}
&
.active
{
background-color
:
#42b983
;
color
:
#fff
;
border-color
:
#42b983
;
&
::before
{
content
:
''
;
content
:
""
;
background
:
#fff
;
display
:
inline-block
;
width
:
8px
;
...
...
@@ -281,7 +272,6 @@ export default defineComponent({
}
}
}
.contextmenu
{
margin
:
0
;
background
:
#fff
;
...
...
@@ -293,13 +283,11 @@ export default defineComponent({
font-size
:
12px
;
font-weight
:
400
;
color
:
#333
;
box-shadow
:
2px
2px
3px
0
rgba
(
0
,
0
,
0
,
.3
);
box-shadow
:
2px
2px
3px
0
rgba
(
0
,
0
,
0
,
0
.3
);
li
{
margin
:
0
;
padding
:
7px
16px
;
cursor
:
pointer
;
&
:hover
{
background
:
#eee
;
}
...
...
@@ -318,20 +306,20 @@ export default defineComponent({
vertical-align
:
2px
;
border-radius
:
50%
;
text-align
:
center
;
transition
:
all
.3s
cubic-bezier
(
.645
,
.045
,
.355
,
1
);
transition
:
all
0
.3s
cubic-bezier
(
0
.645
,
0
.045
,
0
.355
,
1
);
transform-origin
:
100%
50%
;
&
:before
{
transform
:
scale
(
.6
);
transform
:
scale
(
0
.6
);
display
:
inline-block
;
vertical-align
:
-3px
;
}
&
:hover
{
background-color
:
#b4bccc
;
color
:
#fff
;
width
:
12px
!
important
;
height
:
12px
!
important
;
}
}
}
}
</
style
>
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录