Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dr.Disrespect
vue-vben-admin
提交
2b95be80
V
vue-vben-admin
项目概览
Dr.Disrespect
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
2b95be80
编写于
11月 11, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix cssVar hmr error
上级
7692ffb9
变更
5
展开全部
显示空白变更内容
内联
并排
Showing
5 changed file
with
174 addition
and
216 deletion
+174
-216
src/components/Menu/src/index.less
src/components/Menu/src/index.less
+3
-8
src/hooks/web/useCssVar.ts
src/hooks/web/useCssVar.ts
+35
-29
src/settings/projectSetting.ts
src/settings/projectSetting.ts
+1
-1
src/setup/theme/index.ts
src/setup/theme/index.ts
+9
-15
yarn.lock
yarn.lock
+126
-163
未找到文件。
src/components/Menu/src/index.less
浏览文件 @
2b95be80
...
...
@@ -50,8 +50,11 @@
}
// collapsed show title end
.ant-menu-item,
.ant-menu-submenu-title {
> .basic-menu__name {
width: 100%;
.basic-menu__tag {
float: right;
margin-top: @app-menu-item-height / 2;
...
...
@@ -62,14 +65,6 @@
.ant-menu-item {
transition: unset;
> .basic-menu__name {
.basic-menu__tag {
float: right;
margin-top: @app-menu-item-height / 2;
transform: translate(0%, -50%);
}
}
}
&__tag {
...
...
src/hooks/web/useCssVar.ts
浏览文件 @
2b95be80
import
{
ref
,
Ref
,
isRef
,
watch
}
from
'
@vue/runtime-dom
'
// import { ref, Ref, isRef, watch } from '@vue/runtime-dom';
export
default
function
useCssVar
(
prop
:
string
,
refEl
?:
Ref
<
HTMLElement
|
null
>
)
{
const
refVar
=
ref
(
''
)
let
el
:
HTMLElement
=
document
.
documentElement
// TODO 打开注释会造成热更新失效,待排查
// export default function useCssVar(prop: string, refEl?: Ref<HTMLElement | null>) {
// const refVar = ref('');
// let el: HTMLElement = document.documentElement;
if
(
isRef
(
refEl
))
{
watch
(
refEl
,
()
=>
{
if
(
refEl
.
value
)
{
el
=
refEl
.
value
as
HTMLElement
refVar
.
value
=
getComputedStyle
(
el
).
getPropertyValue
(
prop
)
}
},
{
immediate
:
true
}
)
}
else
{
refVar
.
value
=
getComputedStyle
(
el
).
getPropertyValue
(
prop
)
}
//
if (isRef(refEl)) {
//
watch(
//
refEl,
//
() => {
//
if (refEl.value) {
// el = refEl.value as HTMLElement;
// refVar.value = getComputedStyle(el).getPropertyValue(prop);
//
}
//
},
//
{ immediate: true }
// );
//
} else {
// refVar.value = getComputedStyle(el).getPropertyValue(prop);
//
}
watch
(
refVar
,
val
=>
{
el
&&
el
.
style
.
setProperty
(
prop
,
val
)
},
{
immediate
:
true
}
)
//
watch(
//
refVar,
// (val)
=> {
// el && el.style.setProperty(prop, val);
//
},
//
{ immediate: true }
// );
return
refVar
// return refVar;
// }
export
function
getCssVar
(
prop
:
string
,
dom
=
document
.
documentElement
)
{
return
getComputedStyle
(
dom
).
getPropertyValue
(
prop
);
}
export
function
setCssVar
(
prop
:
string
,
val
:
any
,
dom
=
document
.
documentElement
)
{
dom
.
style
.
setProperty
(
prop
,
val
);
}
src/settings/projectSetting.ts
浏览文件 @
2b95be80
...
...
@@ -68,7 +68,7 @@ const setting: ProjectConfig = {
// 是否显示搜索框
showSearch
:
true
,
// 菜单宽度
menuWidth
:
2
0
0
,
menuWidth
:
2
1
0
,
// 菜单模式
mode
:
MenuModeEnum
.
INLINE
,
// 菜单类型
...
...
src/setup/theme/index.ts
浏览文件 @
2b95be80
import
useCssVar
from
'
/@/hooks/web/useCssVar
'
;
import
{
setCssVar
}
from
'
/@/hooks/web/useCssVar
'
;
import
{
isHexColor
,
colorIsDark
,
lighten
,
darken
}
from
'
/@/utils/color
'
;
import
{
appStore
}
from
'
/@/store/modules/app
'
;
import
{
MenuThemeEnum
}
from
'
/@/enums/menuEnum
'
;
...
...
@@ -29,15 +29,13 @@ export const updateGrayMode = (gray: boolean) => {
export
function
updateHeaderBgColor
(
color
:
string
)
{
if
(
!
isHexColor
(
color
))
return
;
const
bgColorRef
=
useCssVar
(
HEADER_BG_COLOR_VAR
);
const
bgHoverColorRef
=
useCssVar
(
HEADER_BG_HOVER_COLOR_VAR
);
const
topMenuActiveBgColorRef
=
useCssVar
(
HEADER_MENU_ACTIVE_BG_COLOR_VAR
);
// bg color
bgColorRef
.
value
=
color
;
setCssVar
(
HEADER_BG_COLOR_VAR
,
color
);
// hover color
const
hoverColor
=
lighten
(
color
,
6
);
bgHoverColorRef
.
value
=
hoverColor
;
topMenuActiveBgColorRef
.
value
=
hoverColor
;
setCssVar
(
HEADER_BG_HOVER_COLOR_VAR
,
hoverColor
)
;
setCssVar
(
HEADER_MENU_ACTIVE_BG_COLOR_VAR
,
hoverColor
)
;
const
isDark
=
colorIsDark
(
color
);
...
...
@@ -51,15 +49,11 @@ export function updateHeaderBgColor(color: string) {
export
function
updateSidebarBgColor
(
color
:
string
)
{
if
(
!
isHexColor
(
color
))
return
;
const
siderBgColor
=
useCssVar
(
SIDER_DARK_BG_COLOR
);
const
darkenBgColor
=
useCssVar
(
SIDER_DARK_DARKEN_BG_COLOR
);
const
lighten1Color
=
useCssVar
(
SIDER_LIGHTEN_1_BG_COLOR
);
const
lighten2Color
=
useCssVar
(
SIDER_LIGHTEN_2_BG_COLOR
);
setCssVar
(
SIDER_DARK_BG_COLOR
,
color
);
setCssVar
(
SIDER_DARK_DARKEN_BG_COLOR
,
darken
(
color
,
6
)
);
setCssVar
(
SIDER_LIGHTEN_1_BG_COLOR
,
lighten
(
color
,
4
)
);
setCssVar
(
SIDER_LIGHTEN_2_BG_COLOR
,
lighten
(
color
,
8
)
);
siderBgColor
.
value
=
color
;
darkenBgColor
.
value
=
darken
(
color
,
6
);
lighten1Color
.
value
=
lighten
(
color
,
4
);
lighten2Color
.
value
=
lighten
(
color
,
8
);
// only #ffffff is light
const
isLight
=
[
'
#fff
'
,
'
#ffffff
'
].
includes
(
color
.
toLowerCase
());
...
...
yarn.lock
浏览文件 @
2b95be80
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录