Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
前端资源
RuoYi-Vue
提交
6a18e063
R
RuoYi-Vue
项目概览
前端资源
/
RuoYi-Vue
10 个月 前同步成功
通知
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 搜索 >>
提交
6a18e063
编写于
4月 15, 2023
作者:
也曾为你像超人
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
去除element滚动条
上级
b4f2a4f7
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
104 addition
and
112 deletion
+104
-112
ruoyi-ui/src/components/IconSelect/index.vue
ruoyi-ui/src/components/IconSelect/index.vue
+10
-18
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
+94
-94
未找到文件。
ruoyi-ui/src/components/IconSelect/index.vue
浏览文件 @
6a18e063
...
...
@@ -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/TagsView/ScrollPane.vue
浏览文件 @
6a18e063
<
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
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录