Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
前端资源
RuoYi-Vue
提交
a4fe88ca
R
RuoYi-Vue
项目概览
前端资源
/
RuoYi-Vue
9 个月 前同步成功
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
R
RuoYi-Vue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
a4fe88ca
编写于
4月 23, 2023
作者:
若
若依
提交者:
Gitee
4月 23, 2023
浏览文件
操作
浏览文件
下载
差异文件
!707 恢复翻页/切换路由滚动功能
Merge pull request !707 from 也曾为你像超人/master
上级
af15a3b2
6a18e063
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
138 addition
and
137 deletion
+138
-137
ruoyi-ui/src/components/IconSelect/index.vue
ruoyi-ui/src/components/IconSelect/index.vue
+10
-18
ruoyi-ui/src/layout/components/AppMain.vue
ruoyi-ui/src/layout/components/AppMain.vue
+23
-0
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
+94
-94
ruoyi-ui/src/layout/index.vue
ruoyi-ui/src/layout/index.vue
+11
-25
未找到文件。
ruoyi-ui/src/components/IconSelect/index.vue
浏览文件 @
a4fe88ca
...
...
@@ -5,16 +5,14 @@
<i
slot=
"suffix"
class=
"el-icon-search el-input__icon"
/>
</el-input>
<div
class=
"icon-list"
>
<el-scrollbar>
<div
class=
"list-container"
>
<div
v-for=
"(item, index) in iconList"
class=
"icon-item-wrapper"
:key=
"index"
@
click=
"selectedIcon(item)"
>
<div
:class=
"['icon-item',
{ active: activeIcon === item }]">
<svg-icon
:icon-class=
"item"
class-name=
"icon"
style=
"height: 30px;width: 16px;"
/>
<span
:title=
"item"
>
{{
item
}}
</span>
</div>
<div
class=
"list-container"
>
<div
v-for=
"(item, index) in iconList"
class=
"icon-item-wrapper"
:key=
"index"
@
click=
"selectedIcon(item)"
>
<div
:class=
"['icon-item',
{ active: activeIcon === item }]">
<svg-icon
:icon-class=
"item"
class-name=
"icon"
style=
"height: 25px;width: 16px;"
/>
<span>
{{
item
}}
</span>
</div>
</div>
</
el-scrollbar
>
</
div
>
</div>
</div>
</
template
>
...
...
@@ -63,27 +61,21 @@ export default {
}
.icon-list
{
height
:
200px
;
::v-deep
.el-scrollbar
{
height
:
100%
;
.el-scrollbar__wrap
{
overflow-x
:
hidden
;
}
}
overflow
:
auto
;
.list-container
{
display
:
flex
;
flex-wrap
:
wrap
;
.icon-item-wrapper
{
width
:
calc
(
100%
/
3
);
height
:
30px
;
line-height
:
30px
;
margin-bottom
:
-5px
;
height
:
25px
;
line-height
:
25px
;
cursor
:
pointer
;
display
:
flex
;
.icon-item
{
display
:
flex
;
max-width
:
100%
;
height
:
100%
;
padding
:
0
2
px
;
padding
:
0
5
px
;
&
:hover
{
background
:
#ececec
;
border-radius
:
5px
;
...
...
ruoyi-ui/src/layout/components/AppMain.vue
浏览文件 @
a4fe88ca
...
...
@@ -50,3 +50,26 @@ export default {
}
}
</
style
>
<
style
lang=
"scss"
>
// fix css style bug in open el-dialog
.el-popup-parent--hidden
{
.fixed-header
{
padding-right
:
6px
;
}
}
::-webkit-scrollbar
{
width
:
6px
;
height
:
6px
;
}
::-webkit-scrollbar-track
{
background-color
:
#f1f1f1
;
}
::-webkit-scrollbar-thumb
{
background-color
:
#c0c0c0
;
border-radius
:
3px
;
}
</
style
>
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
浏览文件 @
a4fe88ca
<
template
>
<el-scrollbar
ref=
"scrollContainer"
:vertical=
"false"
class=
"scroll-container"
@
wheel.native.prevent=
"handleScroll"
>
<slot
/>
</el-scrollbar>
</
template
>
<
script
>
const
tagAndTagSpacing
=
4
// tagAndTagSpacing
export
default
{
name
:
'
ScrollPane
'
,
data
()
{
return
{
left
:
0
}
},
computed
:
{
scrollWrapper
()
{
return
this
.
$refs
.
scrollContainer
.
$refs
.
wrap
}
},
mounted
()
{
this
.
scrollWrapper
.
addEventListener
(
'
scroll
'
,
this
.
emitScroll
,
true
)
},
beforeDestroy
()
{
this
.
scrollWrapper
.
removeEventListener
(
'
scroll
'
,
this
.
emitScroll
)
},
methods
:
{
handleScroll
(
e
)
{
const
eventDelta
=
e
.
wheelDelta
||
-
e
.
deltaY
*
40
const
$scrollWrapper
=
this
.
scrollWrapper
$scrollWrapper
.
scrollLeft
=
$scrollWrapper
.
scrollLeft
+
eventDelta
/
4
},
emitScroll
()
{
this
.
$emit
(
'
scroll
'
)
},
moveToTarget
(
currentTag
)
{
const
$container
=
this
.
$refs
.
scrollContainer
.
$el
const
$containerWidth
=
$container
.
offsetWidth
const
$scrollWrapper
=
this
.
scrollWrapper
const
tagList
=
this
.
$parent
.
$refs
.
tag
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
.
scrollLeft
=
0
}
else
if
(
lastTag
===
currentTag
)
{
$scrollWrapper
.
scrollLeft
=
$scrollWrapper
.
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
.
scrollLeft
+
$containerWidth
)
{
$scrollWrapper
.
scrollLeft
=
afterNextTagOffsetLeft
-
$containerWidth
}
else
if
(
beforePrevTagOffsetLeft
<
$scrollWrapper
.
scrollLeft
)
{
$scrollWrapper
.
scrollLeft
=
beforePrevTagOffsetLeft
}
}
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.scroll-container
{
white-space
:
nowrap
;
position
:
relative
;
overflow
:
hidden
;
width
:
100%
;
::v-deep
{
.el-scrollbar__bar
{
bottom
:
0px
;
}
.el-scrollbar__wrap
{
height
:
49px
;
}
}
}
</
style
>
<
template
>
<el-scrollbar
ref=
"scrollContainer"
:vertical=
"false"
class=
"scroll-container"
@
wheel.native.prevent=
"handleScroll"
>
<slot
/>
</el-scrollbar>
</
template
>
<
script
>
const
tagAndTagSpacing
=
4
// tagAndTagSpacing
export
default
{
name
:
'
ScrollPane
'
,
data
()
{
return
{
left
:
0
}
},
computed
:
{
scrollWrapper
()
{
return
this
.
$refs
.
scrollContainer
.
$refs
.
wrap
}
},
mounted
()
{
this
.
scrollWrapper
.
addEventListener
(
'
scroll
'
,
this
.
emitScroll
,
true
)
},
beforeDestroy
()
{
this
.
scrollWrapper
.
removeEventListener
(
'
scroll
'
,
this
.
emitScroll
)
},
methods
:
{
handleScroll
(
e
)
{
const
eventDelta
=
e
.
wheelDelta
||
-
e
.
deltaY
*
40
const
$scrollWrapper
=
this
.
scrollWrapper
$scrollWrapper
.
scrollLeft
=
$scrollWrapper
.
scrollLeft
+
eventDelta
/
4
},
emitScroll
()
{
this
.
$emit
(
'
scroll
'
)
},
moveToTarget
(
currentTag
)
{
const
$container
=
this
.
$refs
.
scrollContainer
.
$el
const
$containerWidth
=
$container
.
offsetWidth
const
$scrollWrapper
=
this
.
scrollWrapper
const
tagList
=
this
.
$parent
.
$refs
.
tag
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
.
scrollLeft
=
0
}
else
if
(
lastTag
===
currentTag
)
{
$scrollWrapper
.
scrollLeft
=
$scrollWrapper
.
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
.
scrollLeft
+
$containerWidth
)
{
$scrollWrapper
.
scrollLeft
=
afterNextTagOffsetLeft
-
$containerWidth
}
else
if
(
beforePrevTagOffsetLeft
<
$scrollWrapper
.
scrollLeft
)
{
$scrollWrapper
.
scrollLeft
=
beforePrevTagOffsetLeft
}
}
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.scroll-container
{
white-space
:
nowrap
;
position
:
relative
;
overflow
:
hidden
;
width
:
100%
;
::v-deep
{
.el-scrollbar__bar
{
bottom
:
0px
;
}
.el-scrollbar__wrap
{
height
:
39px
;
}
}
}
</
style
>
ruoyi-ui/src/layout/index.vue
浏览文件 @
a4fe88ca
<
template
>
<div
:class=
"classObj"
class=
"app-wrapper"
:style=
"
{'--current-color': theme}">
<div
v-if=
"device==='mobile'&&sidebar.opened"
class=
"drawer-bg"
@
click=
"handleClickOutside"
/>
<sidebar
v-if=
"!sidebar.hide"
class=
"sidebar-container"
/>
<div
:class=
"
{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<el-scrollbar>
<div
:class=
"
{'fixed-header':fixedHeader}">
<navbar/>
<tags-view
v-if=
"needTagsView"
/>
</div>
<app-main/>
<right-panel>
<settings/>
</right-panel>
</el-scrollbar>
<div
v-if=
"device==='mobile'&&sidebar.opened"
class=
"drawer-bg"
@
click=
"handleClickOutside"
/>
<sidebar
v-if=
"!sidebar.hide"
class=
"sidebar-container"
/>
<div
:class=
"
{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div
:class=
"
{'fixed-header':fixedHeader}">
<navbar/>
<tags-view
v-if=
"needTagsView"
/>
</div>
<app-main/>
<right-panel>
<settings/>
</right-panel>
</div>
</div>
</
template
>
...
...
@@ -74,18 +72,6 @@ export default {
height
:
100%
;
width
:
100%
;
.el-scrollbar
{
height
:
100%
;
}
::v-deep
.el-scrollbar__bar.is-vertical
{
z-index
:
10
;
}
::v-deep
.el-scrollbar__wrap
{
overflow-x
:
hidden
;
}
&
.mobile.openSidebar
{
position
:
fixed
;
top
:
0
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录