提交 0c28ffa8 作者: vben

fix: fix fullscreen bg color not work (#75)

上级 bcab4b77
...@@ -10,34 +10,33 @@ ...@@ -10,34 +10,33 @@
@iconify-bg-color: #5551; @iconify-bg-color: #5551;
// ================================= // =================================
// ==============边框颜色============ // ==============border-color============
// ================================= // =================================
// 暗色-深 // Dark-dark
@border-color-dark: #b6b7b9; @border-color-dark: #b6b7b9;
// 暗色-浅 // Dark-light
@border-color-shallow-dark: #cececd; @border-color-shallow-dark: #cececd;
// 亮色-深 // Light-dark
@border-color-light: #ebeef5; @border-color-light: #ebeef5;
// 亮色-浅 // Light-light
@border-color-shallow-light: #f2f6fc; @border-color-shallow-light: #f2f6fc;
// ================================= // =================================
// ==============message============== // ==============message==============
// ================================= // =================================
// 成功背景颜色
// success-bg-color
@success-background-color: #f1f9ec; @success-background-color: #f1f9ec;
// 一般背景颜色 // info-bg-color
@info-background-color: #e8eff8; @info-background-color: #e8eff8;
// 警告背景颜色 // warn-bg-color
@warning-background-color: #fdf6ed; @warning-background-color: #fdf6ed;
// 危险背景颜色 // danger-bg-color
@danger-background-color: #fef0f0; @danger-background-color: #fef0f0;
// tag标签:失效
@invalid-color: #909399;
// ================================= // =================================
// ==============bg color============ // ==============bg color============
...@@ -59,6 +58,7 @@ ...@@ -59,6 +58,7 @@
@header-light-bg-hover-color: #f6f6f6; @header-light-bg-hover-color: #f6f6f6;
@header-light-desc-color: #7c8087; @header-light-desc-color: #7c8087;
@header-light-bottom-border-color: #eee; @header-light-bottom-border-color: #eee;
// ================================= // =================================
// ==============Menu============ // ==============Menu============
// ================================= // =================================
...@@ -66,9 +66,9 @@ ...@@ -66,9 +66,9 @@
// let -menu // let -menu
@first-menu-item-dark-bg-color: #273352; @first-menu-item-dark-bg-color: #273352;
// 2级菜单黑暗背景色 // Level 2 menu dark background color
@sub-menu-item-dark-bg-color: #314268; @sub-menu-item-dark-bg-color: #314268;
// 3级菜单黑暗背景色 // Level 3 menu dark background color
@children-menu-item-dark-bg-color: #4f6088; @children-menu-item-dark-bg-color: #4f6088;
// top-menu // top-menu
...@@ -87,6 +87,7 @@ ...@@ -87,6 +87,7 @@
@tree-hover-background-color: #f5f7fa; @tree-hover-background-color: #f5f7fa;
// tree item hover font color // tree item hover font color
@tree-hover-font-color: #f5f7fa; @tree-hover-font-color: #f5f7fa;
// ================================= // =================================
// ==============link============ // ==============link============
// ================================= // =================================
...@@ -94,18 +95,19 @@ ...@@ -94,18 +95,19 @@
@link-active-color: darken(@primary-color, 10%); @link-active-color: darken(@primary-color, 10%);
// ================================= // =================================
// ==============文本色-============= // ==============Text color-=============
// ================================= // =================================
// 主文本色 // Main text color
@text-color-base: #2c3a61; @text-color-base: #2c3a61;
// 标注色
// Label color
@text-color-call-out: #606266; @text-color-call-out: #606266;
// 辅助说明信息色-深色 // Auxiliary information color-dark
@text-color-help-dark: #909399; @text-color-help-dark: #909399;
// 辅助说明信息色-浅色 // Auxiliary information color-light color
@text-color-help-light: #c0c4cc; @text-color-help-light: #c0c4cc;
// ================================= // =================================
...@@ -135,7 +137,8 @@ ...@@ -135,7 +137,8 @@
@button-cancel-color: @text-color-call-out; @button-cancel-color: @text-color-call-out;
@button-cancel-bg-color: @white; @button-cancel-bg-color: @white;
@button-cancel-border-color: @border-color-shallow-dark; @button-cancel-border-color: @border-color-shallow-dark;
// 鼠标悬停
// Mouse over
@button-cancel-hover-color: @primary-color; @button-cancel-hover-color: @primary-color;
@button-cancel-hover-bg-color: @white; @button-cancel-hover-bg-color: @white;
@button-cancel-hover-border-color: @primary-color; @button-cancel-hover-border-color: @primary-color;
...@@ -13,6 +13,16 @@ ...@@ -13,6 +13,16 @@
box-sizing: border-box; box-sizing: border-box;
} }
// Background color setting in full screen state in each browser
::backdrop,
html,
*:fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
z-index: 1;
background-color: #fff !important;
}
html, html,
body { body {
width: 100%; width: 100%;
......
/* 滚动槽 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
} }
// TODO 滚动条样式-待修改
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }
/* 滚动条滑块 */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
// overflow: hidden;
&.color-weak { &.color-weak {
filter: invert(80%); filter: invert(80%);
...@@ -18,19 +17,13 @@ ...@@ -18,19 +17,13 @@
} }
} }
// remove the clear button of a text input control in IE10+
input::-ms-clear, input::-ms-clear,
input::-ms-reveal { input::-ms-reveal {
display: none; display: none;
} }
body { body {
// 重置文本样式
.reset-text(); .reset-text();
// font-size: @--base-font-size;
// color: @--norm-text-color;
// background-color: @--norm-background-dark-color !important;
} }
h1, h1,
......
...@@ -15,7 +15,7 @@ export function useBreakpoint() { ...@@ -15,7 +15,7 @@ export function useBreakpoint() {
}; };
} }
// 只要调用一次即可 // Just call it once
export function createBreakpointListen(fn?: Fn) { export function createBreakpointListen(fn?: Fn) {
const screenRef = ref<sizeEnum>(sizeEnum.XL); const screenRef = ref<sizeEnum>(sizeEnum.XL);
const realWidthRef = ref(window.innerWidth); const realWidthRef = ref(window.innerWidth);
......
...@@ -25,12 +25,14 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) { ...@@ -25,12 +25,14 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
} }
tryOnUnmounted(() => { tryOnUnmounted(() => {
const chartInstance = unref(chartInstanceRef); let chartInstance = unref(chartInstanceRef);
if (!chartInstance) { if (!chartInstance) {
return; return;
} }
chartInstanceRef.value = null;
chartInstance.destroy(); chartInstance.destroy();
chartInstanceRef.value = null;
chartInstance = null;
}); });
return { return {
setOptions, setOptions,
......
...@@ -15,35 +15,30 @@ type FSEPropName = ...@@ -15,35 +15,30 @@ type FSEPropName =
| 'msFullscreenElement' | 'msFullscreenElement'
| 'mozFullScreenElement' | 'mozFullScreenElement'
| 'fullscreenElement'; | 'fullscreenElement';
type ONFSCPropName = 'onfullscreenchange' | 'onwebkitfullscreenchange' | 'MSFullscreenChange';
export function useFullscreen( export function useFullscreen(
target: Ref<Nullable<HTMLElement>> = ref(document.documentElement), target: Ref<Nullable<HTMLElement>> = ref(document.documentElement),
options?: FullscreenOptions options?: FullscreenOptions
) { ) {
const isFullscreenRef = ref(false); const isFullscreenRef = ref(false);
const DOC_EL = document.documentElement; const el = document.documentElement;
let RFC_METHOD_NAME: RFSMethodName = 'requestFullscreen'; let RFC_METHOD_NAME: RFSMethodName = 'requestFullscreen';
let EFS_METHOD_NAME: EFSMethodName = 'exitFullscreen'; let EFS_METHOD_NAME: EFSMethodName = 'exitFullscreen';
let FSE_PROP_NAME: FSEPropName = 'fullscreenElement'; let FSE_PROP_NAME: FSEPropName = 'fullscreenElement';
let ON_FSC_PROP_NAME: ONFSCPropName = 'onfullscreenchange';
if ('webkitRequestFullScreen' in DOC_EL) { if ('webkitRequestFullScreen' in el) {
RFC_METHOD_NAME = 'webkitRequestFullScreen'; RFC_METHOD_NAME = 'webkitRequestFullScreen';
EFS_METHOD_NAME = 'webkitExitFullscreen'; EFS_METHOD_NAME = 'webkitExitFullscreen';
FSE_PROP_NAME = 'webkitFullscreenElement'; FSE_PROP_NAME = 'webkitFullscreenElement';
ON_FSC_PROP_NAME = 'onwebkitfullscreenchange'; } else if ('msRequestFullscreen' in el) {
} else if ('msRequestFullscreen' in DOC_EL) {
RFC_METHOD_NAME = 'msRequestFullscreen'; RFC_METHOD_NAME = 'msRequestFullscreen';
EFS_METHOD_NAME = 'msExitFullscreen'; EFS_METHOD_NAME = 'msExitFullscreen';
FSE_PROP_NAME = 'msFullscreenElement'; FSE_PROP_NAME = 'msFullscreenElement';
ON_FSC_PROP_NAME = 'MSFullscreenChange'; } else if ('mozRequestFullScreen' in el) {
} else if ('mozRequestFullScreen' in DOC_EL) {
RFC_METHOD_NAME = 'mozRequestFullScreen'; RFC_METHOD_NAME = 'mozRequestFullScreen';
EFS_METHOD_NAME = 'mozCancelFullScreen'; EFS_METHOD_NAME = 'mozCancelFullScreen';
FSE_PROP_NAME = 'mozFullScreenElement'; FSE_PROP_NAME = 'mozFullScreenElement';
// ON_FSC_PROP_NAME = 'onmozfullscreenchange'; } else if (!('requestFullscreen' in el)) {
} else if (!('requestFullscreen' in DOC_EL)) {
throw new Error('当前浏览器不支持Fullscreen API !'); throw new Error('当前浏览器不支持Fullscreen API !');
} }
function enterFullscreen(): Promise<void> { function enterFullscreen(): Promise<void> {
...@@ -68,32 +63,8 @@ export function useFullscreen( ...@@ -68,32 +63,8 @@ export function useFullscreen(
} }
} }
/**
* 当全屏/退出时触发
*/
function watchFullscreen(callback: (isFull: boolean) => void) {
const cancel = () => {
const t = unref(target);
t && (t.onfullscreenchange = null);
};
const handler = () => {
callback(isFullscreen());
};
if (target.value) {
(target.value as any)[ON_FSC_PROP_NAME] = handler;
}
return {
cancel,
};
}
watchFullscreen((isFull: boolean) => {
isFullscreenRef.value = isFull;
});
return { return {
watchFullscreen, // watchFullscreen,
toggleFullscreen, toggleFullscreen,
exitFullscreen, exitFullscreen,
isFullscreen, isFullscreen,
......
...@@ -58,7 +58,7 @@ export function setSession(key: string, value: any, immediate = false) { ...@@ -58,7 +58,7 @@ export function setSession(key: string, value: any, immediate = false) {
cacheStore.session[BASE_SESSION_CACHE_KEY][key] = value; cacheStore.session[BASE_SESSION_CACHE_KEY][key] = value;
if (immediate) { if (immediate) {
const cache = cacheStore.session; const cache = cacheStore.session;
ls.set(BASE_SESSION_CACHE_KEY, cache); ss.set(BASE_SESSION_CACHE_KEY, cache);
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论