Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
529e85ad
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
4
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,发现更多精彩内容 >>
提交
529e85ad
编写于
1月 21, 2023
作者:
H
haoxr
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 样式优化
上级
a7bf1bd4
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
27 addition
and
49 deletion
+27
-49
src/components/RightPanel/index.vue
src/components/RightPanel/index.vue
+27
-49
未找到文件。
src/components/RightPanel/index.vue
浏览文件 @
529e85ad
...
@@ -3,10 +3,6 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
...
@@ -3,10 +3,6 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import
{
addClass
,
removeClass
}
from
'
@/utils/index
'
;
import
{
addClass
,
removeClass
}
from
'
@/utils/index
'
;
// 图标依赖
import
{
Close
,
Setting
}
from
'
@element-plus/icons-vue
'
;
import
{
ElColorPicker
}
from
'
element-plus
'
;
const
show
=
ref
(
false
);
const
show
=
ref
(
false
);
defineProps
({
defineProps
({
...
@@ -33,24 +29,18 @@ function addEventClick() {
...
@@ -33,24 +29,18 @@ function addEventClick() {
function
closeSidebar
(
evt
:
any
)
{
function
closeSidebar
(
evt
:
any
)
{
// 主题选择点击不关闭
// 主题选择点击不关闭
let
parent
=
evt
.
target
.
closest
(
'
.theme-picker-dropdown
'
);
let
parent
=
evt
.
target
.
closest
(
'
.right-panel-container
'
);
if
(
parent
)
{
return
;
}
parent
=
evt
.
target
.
closest
(
'
.right-panel
'
);
if
(
!
parent
)
{
if
(
!
parent
)
{
show
.
value
=
false
;
show
.
value
=
false
;
window
.
removeEventListener
(
'
click
'
,
closeSidebar
);
window
.
removeEventListener
(
'
click
'
,
closeSidebar
);
}
}
}
}
const
rightPanel
=
ref
(
ElColorPicker
);
const
rightPanel
=
ref
();
function
insertToBody
()
{
function
insertToBody
()
{
const
elx
=
rightPanel
.
value
as
any
;
const
body
=
document
.
querySelector
(
'
body
'
)
as
any
;
const
body
=
document
.
querySelector
(
'
body
'
)
as
any
;
body
.
insertBefore
(
elx
,
body
.
firstChild
);
body
.
insertBefore
(
rightPanel
.
value
,
body
.
firstChild
);
}
}
onMounted
(()
=>
{
onMounted
(()
=>
{
...
@@ -58,53 +48,46 @@ onMounted(() => {
...
@@ -58,53 +48,46 @@ onMounted(() => {
});
});
onBeforeUnmount
(()
=>
{
onBeforeUnmount
(()
=>
{
const
elx
=
rightPanel
.
value
as
any
;
rightPanel
.
value
.
remove
();
elx
.
remove
();
});
});
</
script
>
</
script
>
<
template
>
<
template
>
<div
ref=
"rightPanel"
:class=
"
{ show: show }
">
<div
:class=
"
{ show: show }" ref="rightPanel
">
<div
class=
"right-panel-
background
"
/>
<div
class=
"right-panel-
overlay
"
/>
<div
class=
"right-panel"
>
<div
class=
"right-panel
-container
"
>
<div
<div
class=
"right-panel
__butto
n"
class=
"right-panel
-bt
n"
:style=
"
{
:style=
"
{
top: buttonTop + 'px'
top: buttonTop + 'px'
}"
}"
@click="show = !show"
@click="show = !show"
>
>
<
Close
class=
"icon"
v-show=
"show"
/>
<
i-ep-close
v-show=
"show"
/>
<
Setting
class=
"icon"
v-show=
"!show"
/>
<
i-ep-setting
v-show=
"!show"
/>
</div>
</div>
<div
class=
"right-panel__items"
>
<div>
<slot
/>
<slot
/>
</div>
</div>
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
style
>
<
style
lang=
"scss"
scoped
>
.showRightPanel
{
.showRightPanel
{
overflow
:
hidden
;
overflow
:
hidden
;
position
:
relative
;
position
:
relative
;
width
:
calc
(
100%
-
15px
);
width
:
calc
(
100%
-
15px
);
}
}
</
style
>
.right-panel-overlay
{
<
style
lang=
"scss"
scoped
>
.right-panel-background
{
position
:
fixed
;
position
:
fixed
;
top
:
0
;
top
:
0
;
left
:
0
;
left
:
0
;
opacity
:
0
;
transition
:
opacity
0
.3s
cubic-bezier
(
0
.7
,
0
.3
,
0
.1
,
1
);
background
:
rgba
(
0
,
0
,
0
,
0
.2
);
background
:
rgba
(
0
,
0
,
0
,
0
.2
);
z-index
:
-1
;
}
}
.right-panel
{
.right-panel
-container
{
background-color
:
var
(
--
el-bg-color
);
background-color
:
var
(
--
el-bg-color
-overlay
);
width
:
100%
;
width
:
100%
;
max-width
:
300px
;
max-width
:
300px
;
height
:
100vh
;
height
:
100vh
;
...
@@ -114,42 +97,37 @@ onBeforeUnmount(() => {
...
@@ -114,42 +97,37 @@ onBeforeUnmount(() => {
box-shadow
:
0px
0px
15px
0px
rgba
(
0
,
0
,
0
,
0
.05
);
box-shadow
:
0px
0px
15px
0px
rgba
(
0
,
0
,
0
,
0
.05
);
transition
:
all
0
.25s
cubic-bezier
(
0
.7
,
0
.3
,
0
.1
,
1
);
transition
:
all
0
.25s
cubic-bezier
(
0
.7
,
0
.3
,
0
.1
,
1
);
transform
:
translate
(
100%
);
transform
:
translate
(
100%
);
z-index
:
199
;
z-index
:
999
;
.icon
{
width
:
1em
;
height
:
1em
;
vertical-align
:
middle
;
}
}
}
.show
{
.show
{
transition
:
all
0
.3s
cubic-bezier
(
0
.7
,
0
.3
,
0
.1
,
1
);
transition
:
all
0
.3s
cubic-bezier
(
0
.7
,
0
.3
,
0
.1
,
1
);
.right-panel-
background
{
.right-panel-
overlay
{
z-index
:
99
;
z-index
:
99
;
opacity
:
1
;
opacity
:
1
;
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
}
}
.right-panel
{
.right-panel
-container
{
transform
:
translate
(
0
);
transform
:
translate
(
0
);
}
}
}
}
.right-panel
__butto
n
{
.right-panel
-bt
n
{
background-color
:
var
(
--
el-color-primary
);
background-color
:
var
(
--
el-color-primary
);
color
:
var
(
--
el-color-white
);
color
:
var
(
--
el-color-white
);
width
:
48px
;
width
:
36px
;
height
:
48px
;
height
:
36px
;
left
:
-48px
;
left
:
-36px
;
line-height
:
48px
;
position
:
absolute
;
position
:
absolute
;
text-align
:
center
;
text-align
:
center
;
font-size
:
24px
;
border-radius
:
6px
0
0
6px
;
border-radius
:
6px
0
0
6px
;
z-index
:
0
;
pointer-events
:
auto
;
cursor
:
pointer
;
cursor
:
pointer
;
svg
{
vertical-align
:
-10px
;
width
:
20px
;
height
:
20px
;
}
}
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录