mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-26 16:46:19 +08:00
fix: fix fullscreen bg color not work (#75)
This commit is contained in:
@@ -15,7 +15,7 @@ export function useBreakpoint() {
|
||||
};
|
||||
}
|
||||
|
||||
// 只要调用一次即可
|
||||
// Just call it once
|
||||
export function createBreakpointListen(fn?: Fn) {
|
||||
const screenRef = ref<sizeEnum>(sizeEnum.XL);
|
||||
const realWidthRef = ref(window.innerWidth);
|
||||
|
@@ -25,12 +25,14 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
||||
}
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
const chartInstance = unref(chartInstanceRef);
|
||||
let chartInstance = unref(chartInstanceRef);
|
||||
if (!chartInstance) {
|
||||
return;
|
||||
}
|
||||
chartInstanceRef.value = null;
|
||||
|
||||
chartInstance.destroy();
|
||||
chartInstanceRef.value = null;
|
||||
chartInstance = null;
|
||||
});
|
||||
return {
|
||||
setOptions,
|
||||
|
@@ -15,35 +15,30 @@ type FSEPropName =
|
||||
| 'msFullscreenElement'
|
||||
| 'mozFullScreenElement'
|
||||
| 'fullscreenElement';
|
||||
type ONFSCPropName = 'onfullscreenchange' | 'onwebkitfullscreenchange' | 'MSFullscreenChange';
|
||||
|
||||
export function useFullscreen(
|
||||
target: Ref<Nullable<HTMLElement>> = ref(document.documentElement),
|
||||
options?: FullscreenOptions
|
||||
) {
|
||||
const isFullscreenRef = ref(false);
|
||||
const DOC_EL = document.documentElement;
|
||||
const el = document.documentElement;
|
||||
let RFC_METHOD_NAME: RFSMethodName = 'requestFullscreen';
|
||||
let EFS_METHOD_NAME: EFSMethodName = 'exitFullscreen';
|
||||
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';
|
||||
EFS_METHOD_NAME = 'webkitExitFullscreen';
|
||||
FSE_PROP_NAME = 'webkitFullscreenElement';
|
||||
ON_FSC_PROP_NAME = 'onwebkitfullscreenchange';
|
||||
} else if ('msRequestFullscreen' in DOC_EL) {
|
||||
} else if ('msRequestFullscreen' in el) {
|
||||
RFC_METHOD_NAME = 'msRequestFullscreen';
|
||||
EFS_METHOD_NAME = 'msExitFullscreen';
|
||||
FSE_PROP_NAME = 'msFullscreenElement';
|
||||
ON_FSC_PROP_NAME = 'MSFullscreenChange';
|
||||
} else if ('mozRequestFullScreen' in DOC_EL) {
|
||||
} else if ('mozRequestFullScreen' in el) {
|
||||
RFC_METHOD_NAME = 'mozRequestFullScreen';
|
||||
EFS_METHOD_NAME = 'mozCancelFullScreen';
|
||||
FSE_PROP_NAME = 'mozFullScreenElement';
|
||||
// ON_FSC_PROP_NAME = 'onmozfullscreenchange';
|
||||
} else if (!('requestFullscreen' in DOC_EL)) {
|
||||
} else if (!('requestFullscreen' in el)) {
|
||||
throw new Error('当前浏览器不支持Fullscreen API !');
|
||||
}
|
||||
function enterFullscreen(): Promise<void> {
|
||||
@@ -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 {
|
||||
watchFullscreen,
|
||||
// watchFullscreen,
|
||||
toggleFullscreen,
|
||||
exitFullscreen,
|
||||
isFullscreen,
|
||||
|
Reference in New Issue
Block a user