refactor(projects): 代码优化
ISSUES CLOSED: \
This commit is contained in:
parent
4b80a66114
commit
44ab55d594
@ -3,7 +3,5 @@ import useBoolean from './useBoolean';
|
||||
import useLoading from './useLoading';
|
||||
import useLoadingEmpty from './useLoadingEmpty';
|
||||
import useReload from './useReload';
|
||||
import useBodyScroll from './useBodyScroll';
|
||||
import useModalVisible from './useModalVisible';
|
||||
|
||||
export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload, useBodyScroll, useModalVisible };
|
||||
export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload };
|
||||
|
@ -1,47 +0,0 @@
|
||||
interface ScrollBodyStyle {
|
||||
overflow: string;
|
||||
paddingRight: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* body标签滚动
|
||||
* @param duration - 显示滚动条的延迟时间
|
||||
*/
|
||||
export default function useBodyScroll(duration = 300) {
|
||||
const defaultStyle: ScrollBodyStyle = {
|
||||
overflow: '',
|
||||
paddingRight: ''
|
||||
};
|
||||
function getInitBodyStyle() {
|
||||
const { overflow, paddingRight } = document.body.style;
|
||||
Object.assign(defaultStyle, { overflow, paddingRight });
|
||||
}
|
||||
function setScrollBodyStyle() {
|
||||
document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
function resetScrollBodyStyle() {
|
||||
document.body.style.overflow = defaultStyle.overflow;
|
||||
document.body.style.paddingRight = defaultStyle.paddingRight;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理body的滚动条
|
||||
* @param hideScroll - 禁止滚动
|
||||
*/
|
||||
function scrollBodyHandler(hideScroll: boolean) {
|
||||
if (hideScroll) {
|
||||
setScrollBodyStyle();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
resetScrollBodyStyle();
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
getInitBodyStyle();
|
||||
|
||||
return {
|
||||
scrollBodyHandler
|
||||
};
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
import { watch, onUnmounted } from 'vue';
|
||||
import useBoolean from './useBoolean';
|
||||
import useBodyScroll from './useBodyScroll';
|
||||
|
||||
/**
|
||||
* 使用弹窗
|
||||
* @param hideScroll - 关闭html滚动条
|
||||
*/
|
||||
export default function useModalVisible(hideScroll = true) {
|
||||
const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
|
||||
const { scrollBodyHandler } = useBodyScroll();
|
||||
|
||||
function modalVisibleWatcher() {
|
||||
const stopHandle = watch(visible, async newValue => {
|
||||
scrollBodyHandler(newValue);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
}
|
||||
|
||||
if (hideScroll) {
|
||||
modalVisibleWatcher();
|
||||
}
|
||||
|
||||
return {
|
||||
visible,
|
||||
openModal,
|
||||
closeModal,
|
||||
toggleModal
|
||||
};
|
||||
}
|
@ -43,6 +43,7 @@ export const useRouteStore = defineStore('route-store', {
|
||||
cacheRoutes: []
|
||||
}),
|
||||
actions: {
|
||||
/** 重置路由的store */
|
||||
resetRouteStore() {
|
||||
this.resetRoutes();
|
||||
this.$reset();
|
||||
|
@ -16,6 +16,7 @@ export const useThemeStore = defineStore('theme-store', {
|
||||
naiveTheme(state) {
|
||||
return state.darkMode ? darkTheme : undefined;
|
||||
},
|
||||
/** 页面动画模式 */
|
||||
pageAnimateMode(state) {
|
||||
return state.page.animate ? state.page.animateMode : undefined;
|
||||
}
|
||||
@ -34,7 +35,7 @@ export const useThemeStore = defineStore('theme-store', {
|
||||
this.followSystemTheme = visible;
|
||||
},
|
||||
/** 自动跟随系统主题 */
|
||||
autoFollowSystemMode(darkMode: boolean) {
|
||||
setAutoFollowSystemMode(darkMode: boolean) {
|
||||
if (this.followSystemTheme) {
|
||||
this.darkMode = darkMode;
|
||||
}
|
||||
|
@ -1,21 +0,0 @@
|
||||
import { watch, onUnmounted } from 'vue';
|
||||
import { useBodyScroll } from '@/hooks';
|
||||
import { useAppStore } from '../modules';
|
||||
|
||||
/** 订阅app store */
|
||||
export default function subscribeAppStore() {
|
||||
const app = useAppStore();
|
||||
const { scrollBodyHandler } = useBodyScroll();
|
||||
|
||||
// 弹窗打开时禁止滚动条
|
||||
const stopHandle = watch(
|
||||
() => app.settingDrawerVisible,
|
||||
newValue => {
|
||||
scrollBodyHandler(newValue);
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
}
|
@ -1,8 +1,6 @@
|
||||
// import subscribeAppStore from './app';
|
||||
import subscribeThemeStore from './theme';
|
||||
|
||||
/** 订阅状态 */
|
||||
export function subscribeStore() {
|
||||
// subscribeAppStore();
|
||||
subscribeThemeStore();
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ export default function subscribeThemeStore() {
|
||||
osTheme,
|
||||
newValue => {
|
||||
const isDark = newValue === 'dark';
|
||||
theme.autoFollowSystemMode(isDark);
|
||||
theme.setAutoFollowSystemMode(isDark);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user