admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: api 优化, 将 className 优化为 classList

Browse Source
This commit is contained in:
pany 2024-11-14 20:07:24 +08:00
parent 869986bc50
commit 394f6e16dc
2 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Screenfull/index.vue
View File

@ -21,51 +21,49 @@ const props = withDefaults(defineProps<Props>(), {
content: false
})
const CONTENT_LARGE = "content-large"
const CONTENT_FULL = "content-full"
const classList = document.body.classList
//#region 全屏
const isEnabled = screenfull.isEnabled
const isFullscreen = ref<boolean>(false)
const fullscreenTips = computed(() => {
return isFullscreen.value ? props.exitTips : props.openTips
})
const fullscreenSvgName = computed(() => {
return isFullscreen.value ? "fullscreen-exit" : "fullscreen"
})
const fullscreenTips = computed(() => (isFullscreen.value ? props.exitTips : props.openTips))
const fullscreenSvgName = computed(() => (isFullscreen.value ? "fullscreen-exit" : "fullscreen"))
const handleFullscreenClick = () => {
const dom = document.querySelector(props.element) || undefined
screenfull.isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
}
const handleFullscreenChange = () => {
isFullscreen.value = screenfull.isFullscreen
// 退出全屏时清除所有的 class
isFullscreen.value || (document.body.className = "")
// 退出全屏时清除相关的 class
isFullscreen.value || classList.remove(CONTENT_LARGE, CONTENT_FULL)
}
watchEffect((onCleanup) => {
// 挂载组件时自动执行
screenfull.isEnabled && screenfull.on("change", handleFullscreenChange)
// 卸载组件时自动执行
onCleanup(() => {
screenfull.isEnabled && screenfull.off("change", handleFullscreenChange)
})
if (isEnabled) {
// 挂载组件时自动执行
screenfull.on("change", handleFullscreenChange)
// 卸载组件时自动执行
onCleanup(() => screenfull.off("change", handleFullscreenChange))
}
})
//#endregion
//#region 内容区
const isContentLarge = ref<boolean>(false)
const contentLargeTips = computed(() => {
return isContentLarge.value ? "内容区复原" : "内容区放大"
})
const contentLargeSvgName = computed(() => {
return isContentLarge.value ? "fullscreen-exit" : "fullscreen"
})
const contentLargeTips = computed(() => (isContentLarge.value ? "内容区复原" : "内容区放大"))
const contentLargeSvgName = computed(() => (isContentLarge.value ? "fullscreen-exit" : "fullscreen"))
const handleContentLargeClick = () => {
isContentLarge.value = !isContentLarge.value
// 内容区放大时，将不需要的组件隐藏
document.body.className = isContentLarge.value ? "content-large" : ""
classList.toggle(CONTENT_LARGE, isContentLarge.value)
}
const handleContentFullClick = () => {
// 取消内容区放大
isContentLarge.value && handleContentLargeClick()
// 内容区全屏时，将不需要的组件隐藏
document.body.className = "content-full"
classList.add(CONTENT_FULL)
// 开启全屏
handleFullscreenClick()
}

4
src/hooks/useGreyAndColorWeakness.ts
View File

@ -9,8 +9,8 @@ const classList = document.documentElement.classList
const initGreyAndColorWeakness = () => {
const settingsStore = useSettingsStore()
watchEffect(() => {
settingsStore.showGreyMode ? classList.add(GREY_MODE) : classList.remove(GREY_MODE)
settingsStore.showColorWeakness ? classList.add(COLOR_WEAKNESS) : classList.remove(COLOR_WEAKNESS)
classList.toggle(GREY_MODE, settingsStore.showGreyMode)
classList.toggle(COLOR_WEAKNESS, settingsStore.showColorWeakness)
})
}