Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
球球不吃虾
vue-vben-admin
提交
979058ad
V
vue-vben-admin
项目概览
球球不吃虾
/
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,体验更适合开发者的 AI 搜索 >>
提交
979058ad
编写于
3月 27, 2021
作者:
V
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: refoctor useTitle
上级
3b3a7462
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
61 addition
and
158 deletion
+61
-158
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+6
-0
src/App.vue
src/App.vue
+6
-3
src/components/Table/src/components/settings/FullScreenSetting.vue
...nents/Table/src/components/settings/FullScreenSetting.vue
+7
-6
src/hooks/core/useAttrs.ts
src/hooks/core/useAttrs.ts
+1
-1
src/hooks/web/useFullScreen.ts
src/hooks/web/useFullScreen.ts
+0
-71
src/hooks/web/useTitle.ts
src/hooks/web/useTitle.ts
+22
-0
src/layouts/default/header/components/FullScreen.vue
src/layouts/default/header/components/FullScreen.vue
+7
-6
src/router/guard/index.ts
src/router/guard/index.ts
+0
-2
src/router/guard/titleGuard.ts
src/router/guard/titleGuard.ts
+0
-18
src/utils/index.ts
src/utils/index.ts
+0
-29
src/views/demo/feat/full-screen/index.vue
src/views/demo/feat/full-screen/index.vue
+12
-22
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
979058ad
## Wip
### ✨ Refactor
-
移除 useFullScreen 函数
## 2.1.1 (2021-03-26)
### ✨ Features
...
...
src/App.vue
浏览文件 @
979058ad
...
...
@@ -14,18 +14,21 @@
import
{
initAppConfigStore
}
from
'
/@/logics/initAppConfig
'
;
import
{
useLockPage
}
from
'
/@/hooks/web/useLockPage
'
;
import
{
useTitle
}
from
'
/@/hooks/web/useTitle
'
;
import
{
useLocale
}
from
'
/@/locales/useLocale
'
;
export
default
defineComponent
({
name
:
'
App
'
,
components
:
{
ConfigProvider
,
AppProvider
},
setup
()
{
// support Multi-language
const
{
getAntdLocale
}
=
useLocale
();
// Initialize vuex internal system configuration
initAppConfigStore
();
useTitle
();
// support Multi-language
const
{
getAntdLocale
}
=
useLocale
();
// Create a lock screen monitor
const
lockEvent
=
useLockPage
();
...
...
src/components/Table/src/components/settings/FullScreenSetting.vue
浏览文件 @
979058ad
...
...
@@ -3,8 +3,8 @@
<template
#title
>
<span>
{{
t
(
'
component.table.settingFullScreen
'
)
}}
</span>
</
template
>
<FullscreenOutlined
@
click=
"toggle
Fullscreen"
v-if=
"!isFullscreenRef
"
/>
<FullscreenExitOutlined
@
click=
"toggle
Fullscreen
"
v-else
/>
<FullscreenOutlined
@
click=
"toggle
"
v-if=
"!isFullscreen
"
/>
<FullscreenExitOutlined
@
click=
"toggle"
v-else
/>
</Tooltip>
</template>
<
script
lang=
"ts"
>
...
...
@@ -12,7 +12,8 @@
import
{
Tooltip
}
from
'
ant-design-vue
'
;
import
{
FullscreenOutlined
,
FullscreenExitOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
useFullscreen
}
from
'
/@/hooks/web/useFullScreen
'
;
import
{
useFullscreen
}
from
'
@vueuse/core
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
useTableContext
}
from
'
../../hooks/useTableContext
'
;
...
...
@@ -27,11 +28,11 @@
setup
()
{
const
table
=
useTableContext
();
const
{
t
}
=
useI18n
();
const
{
toggle
Fullscreen
,
isFullscreenRef
}
=
useFullscreen
(
table
.
wrapRef
);
const
{
toggle
,
isFullscreen
}
=
useFullscreen
(
table
.
wrapRef
);
return
{
toggle
Fullscreen
,
isFullscreen
Ref
,
toggle
,
isFullscreen
,
t
,
};
},
...
...
src/hooks/core/useAttrs.ts
浏览文件 @
979058ad
...
...
@@ -8,7 +8,7 @@ interface Params {
const
DEFAULT_EXCLUDE_KEYS
=
[
'
class
'
,
'
style
'
];
const
LISTENER_PREFIX
=
/^on
[
A-Z
]
/
;
export
function
entries
<
T
>
(
obj
:
Hash
<
T
>
):
[
string
,
T
][]
{
export
function
entries
<
T
>
(
obj
:
Recordable
<
T
>
):
[
string
,
T
][]
{
return
Object
.
keys
(
obj
).
map
((
key
:
string
)
=>
[
key
,
obj
[
key
]]);
}
...
...
src/hooks/web/useFullScreen.ts
已删除
100644 → 0
浏览文件 @
3b3a7462
import
{
Ref
,
ref
,
unref
}
from
'
vue
'
;
type
RFSMethodName
=
|
'
webkitRequestFullScreen
'
|
'
requestFullscreen
'
|
'
msRequestFullscreen
'
|
'
mozRequestFullScreen
'
;
type
EFSMethodName
=
|
'
webkitExitFullscreen
'
|
'
msExitFullscreen
'
|
'
mozCancelFullScreen
'
|
'
exitFullscreen
'
;
type
FSEPropName
=
|
'
webkitFullscreenElement
'
|
'
msFullscreenElement
'
|
'
mozFullScreenElement
'
|
'
fullscreenElement
'
;
export
function
useFullscreen
(
target
:
Ref
<
Nullable
<
HTMLElement
>>
|
Nullable
<
HTMLElement
>
=
ref
(
document
.
documentElement
),
options
?:
FullscreenOptions
)
{
const
isFullscreenRef
=
ref
(
false
);
const
el
=
document
.
documentElement
;
let
RFC_METHOD_NAME
:
RFSMethodName
=
'
requestFullscreen
'
;
let
EFS_METHOD_NAME
:
EFSMethodName
=
'
exitFullscreen
'
;
let
FSE_PROP_NAME
:
FSEPropName
=
'
fullscreenElement
'
;
if
(
'
webkitRequestFullScreen
'
in
el
)
{
RFC_METHOD_NAME
=
'
webkitRequestFullScreen
'
;
EFS_METHOD_NAME
=
'
webkitExitFullscreen
'
;
FSE_PROP_NAME
=
'
webkitFullscreenElement
'
;
}
else
if
(
'
msRequestFullscreen
'
in
el
)
{
RFC_METHOD_NAME
=
'
msRequestFullscreen
'
;
EFS_METHOD_NAME
=
'
msExitFullscreen
'
;
FSE_PROP_NAME
=
'
msFullscreenElement
'
;
}
else
if
(
'
mozRequestFullScreen
'
in
el
)
{
RFC_METHOD_NAME
=
'
mozRequestFullScreen
'
;
EFS_METHOD_NAME
=
'
mozCancelFullScreen
'
;
FSE_PROP_NAME
=
'
mozFullScreenElement
'
;
}
else
if
(
!
(
'
requestFullscreen
'
in
el
))
{
throw
new
Error
(
'
当前浏览器不支持Fullscreen API !
'
);
}
function
enterFullscreen
():
Promise
<
void
>
{
isFullscreenRef
.
value
=
true
;
return
(
unref
(
target
)
as
any
)[
RFC_METHOD_NAME
](
options
);
}
function
exitFullscreen
():
Promise
<
void
>
{
isFullscreenRef
.
value
=
false
;
return
(
document
as
any
)[
EFS_METHOD_NAME
]();
}
function
isFullscreen
():
boolean
{
return
unref
(
target
)
===
(
document
as
any
)[
FSE_PROP_NAME
];
}
async
function
toggleFullscreen
():
Promise
<
void
>
{
if
(
!
unref
(
target
))
return
;
return
isFullscreen
()
?
exitFullscreen
()
:
enterFullscreen
();
}
return
{
// watchFullscreen,
toggleFullscreen
,
exitFullscreen
,
isFullscreen
,
enterFullscreen
,
isFullscreenRef
,
};
}
src/hooks/web/useTitle.ts
0 → 100644
浏览文件 @
979058ad
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
useTitle
as
usePageTitle
}
from
'
@vueuse/core
'
;
import
{
useGlobSetting
}
from
'
/@/hooks/setting
'
;
import
{
REDIRECT_NAME
}
from
'
/@/router/constant
'
;
import
{
listenerLastChangeTab
}
from
'
/@/logics/mitt/tabChange
'
;
export
function
useTitle
()
{
const
{
title
}
=
useGlobSetting
();
const
{
t
}
=
useI18n
();
const
pageTitle
=
usePageTitle
();
listenerLastChangeTab
((
route
)
=>
{
if
(
route
.
name
===
REDIRECT_NAME
)
{
return
;
}
const
tTitle
=
t
(
route
?.
meta
?.
title
as
string
);
pageTitle
.
value
=
tTitle
?
`
${
tTitle
}
-
${
title
}
`
:
`
${
title
}
`
;
});
}
src/layouts/default/header/components/FullScreen.vue
浏览文件 @
979058ad
<
template
>
<Tooltip
:title=
"getTitle"
placement=
"bottom"
:mouseEnterDelay=
"0.5"
>
<span
@
click=
"toggle
Fullscreen
"
>
<span
@
click=
"toggle"
>
<FullscreenOutlined
v-if=
"!isFullscreen"
/>
<FullscreenExitOutlined
v-else
/>
</span>
...
...
@@ -10,7 +10,8 @@
import
{
defineComponent
,
computed
,
unref
}
from
'
vue
'
;
import
{
Tooltip
}
from
'
ant-design-vue
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
useFullscreen
}
from
'
/@/hooks/web/useFullScreen
'
;
import
{
useFullscreen
}
from
'
@vueuse/core
'
;
import
{
FullscreenExitOutlined
,
FullscreenOutlined
}
from
'
@ant-design/icons-vue
'
;
export
default
defineComponent
({
name
:
'
FullScreen
'
,
...
...
@@ -18,18 +19,18 @@
setup
()
{
const
{
t
}
=
useI18n
();
const
{
toggle
Fullscreen
,
isFullscreenRef
}
=
useFullscreen
();
const
{
toggle
,
isFullscreen
}
=
useFullscreen
();
const
getTitle
=
computed
(()
=>
{
return
unref
(
isFullscreen
Ref
)
return
unref
(
isFullscreen
)
?
t
(
'
layout.header.tooltipExitFull
'
)
:
t
(
'
layout.header.tooltipEntryFull
'
);
});
return
{
getTitle
,
isFullscreen
:
isFullscreenRef
,
toggle
Fullscreen
,
isFullscreen
,
toggle
,
};
},
});
...
...
src/router/guard/index.ts
浏览文件 @
979058ad
...
...
@@ -3,7 +3,6 @@ import router from '/@/router';
import
{
createProgressGuard
}
from
'
./progressGuard
'
;
import
{
createPermissionGuard
}
from
'
./permissionGuard
'
;
import
{
createPageLoadingGuard
}
from
'
./pageLoadingGuard
'
;
import
{
createTitleGuard
}
from
'
./titleGuard
'
;
import
{
createMessageGuard
}
from
'
./messageGuard
'
;
import
{
createScrollGuard
}
from
'
./scrollGuard
'
;
import
{
createHttpGuard
}
from
'
./httpGuard
'
;
...
...
@@ -15,7 +14,6 @@ createPageLoadingGuard(router);
createHttpGuard
(
router
);
createScrollGuard
(
router
);
createMessageGuard
(
router
);
createTitleGuard
(
router
);
createProgressGuard
(
router
);
createPermissionGuard
(
router
);
createStateGuard
(
router
);
src/router/guard/titleGuard.ts
已删除
100644 → 0
浏览文件 @
3b3a7462
import
type
{
Router
}
from
'
vue-router
'
;
import
{
useGlobSetting
}
from
'
/@/hooks/setting
'
;
import
{
setTitle
}
from
'
/@/utils
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
REDIRECT_NAME
}
from
'
/@/router/constant
'
;
const
globSetting
=
useGlobSetting
();
export
function
createTitleGuard
(
router
:
Router
)
{
router
.
afterEach
(
async
(
to
)
=>
{
const
{
t
}
=
useI18n
();
to
.
name
!==
REDIRECT_NAME
&&
setTitle
(
t
(
to
.
meta
.
title
as
string
),
globSetting
.
title
);
return
true
;
});
}
src/utils/index.ts
浏览文件 @
979058ad
...
...
@@ -62,35 +62,6 @@ export function getDynamicProps<T, U>(props: T): Partial<U> {
return
ret
as
Partial
<
U
>
;
}
/**
* set page Title
* @param {*} title :page Title
*/
function
setDocumentTitle
(
title
:
string
)
{
document
.
title
=
title
;
const
ua
=
navigator
.
userAgent
;
const
regex
=
/
\b
MicroMessenger
\/([\d
.
]
+
)
/
;
// 兼容
if
(
regex
.
test
(
ua
)
&&
/ip
(
hone|od|ad
)
/i
.
test
(
ua
))
{
const
i
=
document
.
createElement
(
'
iframe
'
);
i
.
src
=
'
/favicon.ico
'
;
i
.
style
.
display
=
'
none
'
;
i
.
onload
=
function
()
{
setTimeout
(
function
()
{
i
.
remove
();
},
9
);
};
document
.
body
.
appendChild
(
i
);
}
}
export
function
setTitle
(
title
:
string
,
appTitle
?:
string
)
{
if
(
title
)
{
const
_title
=
title
?
`
${
title
}
-
${
appTitle
}
`
:
`
${
appTitle
}
`
;
setDocumentTitle
(
_title
);
}
}
export
function
getRawRoute
(
route
:
RouteLocationNormalized
):
RouteLocationNormalized
{
if
(
!
route
)
return
route
;
const
{
matched
,
...
opt
}
=
route
;
...
...
src/views/demo/feat/full-screen/index.vue
浏览文件 @
979058ad
<
template
>
<PageWrapper
title=
"全屏示例"
>
<CollapseContainer
class=
"w-full h-32 bg-white rounded-md"
title=
"Window Full Screen"
>
<a-button
type=
"primary"
@
click=
"enterFullscreen"
class=
"mr-2"
>
Enter Window Full Screen
</a-button>
<a-button
color=
"success"
@
click=
"toggleFullscreen"
class=
"mr-2"
>
Toggle Window Full Screen
</a-button>
<a-button
type=
"primary"
@
click=
"enter"
class=
"mr-2"
>
Enter Window Full Screen
</a-button>
<a-button
color=
"success"
@
click=
"toggle"
class=
"mr-2"
>
Toggle Window Full Screen
</a-button>
<a-button
color=
"error"
@
click=
"exitFullscreen"
class=
"mr-2"
>
Exit Window Full Screen
</a-button>
<a-button
color=
"error"
@
click=
"exit"
class=
"mr-2"
>
Exit Window Full Screen
</a-button>
Current State:
{{
isFullscreen
Ref
}}
Current State:
{{
isFullscreen
}}
</CollapseContainer>
<CollapseContainer
class=
"w-full mt-5 bg-white rounded-md"
title=
"Dom Full Screen"
>
...
...
@@ -30,27 +24,23 @@
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
CollapseContainer
}
from
'
/@/components/Container/index
'
;
import
{
useFullscreen
}
from
'
/@/hooks/web/useFullScreen
'
;
import
{
useFullscreen
}
from
'
@vueuse/core
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
export
default
defineComponent
({
components
:
{
CollapseContainer
,
PageWrapper
},
setup
()
{
const
domRef
=
ref
<
Nullable
<
HTMLElement
>>
(
null
);
const
{
enterFullscreen
,
toggleFullscreen
,
isFullscreenRef
,
exitFullscreen
,
}
=
useFullscreen
();
const
{
enter
,
toggle
,
exit
,
isFullscreen
}
=
useFullscreen
();
const
{
toggle
Fullscreen
:
toggleDom
}
=
useFullscreen
(
domRef
);
const
{
toggle
:
toggleDom
}
=
useFullscreen
(
domRef
);
return
{
enter
Fullscreen
,
enter
,
toggleDom
,
toggle
Fullscreen
,
isFullscreen
Ref
,
exit
Fullscreen
,
toggle
,
isFullscreen
,
exit
,
domRef
,
};
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录