62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { COLLAPSE_THRESHOLD } from '@/config/index';
|
|
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
|
|
import { useDesignStore } from '@/store';
|
|
|
|
/**
|
|
* 侧边栏折叠切换逻辑组合式函数 方便多个页面调用
|
|
* @param threshold 折叠阈值（可选，默认使用全局配置）
|
|
*/
|
|
export function useCollapseToggle(threshold: number = COLLAPSE_THRESHOLD) {
|
|
const designStore = useDesignStore();
|
|
// 获取当前视口宽度是否大于阈值，但不做响应式处理，传入一个空函数执行
|
|
const { isAboveThreshold } = useWindowWidthObserver(threshold, () => {});
|
|
|
|
/** 核心折叠切换方法 */
|
|
const changeCollapse = () => {
|
|
// 切换最终折叠状态
|
|
designStore.setCollapse(!designStore.isCollapse);
|
|
|
|
if (isAboveThreshold.value) {
|
|
// 宽屏逻辑
|
|
if (designStore.isCollapse) {
|
|
designStore.setCollapseType('alwaysCollapsed');
|
|
}
|
|
else {
|
|
designStore.setCollapseType(
|
|
designStore.collapseType === 'narrowExpandWideCollapse'
|
|
? 'alwaysExpanded'
|
|
: 'followSystem',
|
|
);
|
|
}
|
|
}
|
|
else {
|
|
// 窄屏逻辑
|
|
if (designStore.isCollapse) {
|
|
designStore.setCollapseType('followSystem');
|
|
}
|
|
else {
|
|
designStore.setCollapseType(
|
|
designStore.collapseType === 'alwaysCollapsed'
|
|
? 'narrowExpandWideCollapse'
|
|
: 'alwaysExpanded',
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
return {
|
|
changeCollapse,
|
|
};
|
|
}
|
|
|
|
// 使用示例与特性说明
|
|
// <script setup lang="ts">
|
|
// import { useCollapseToggle } from '@/composables/useCollapseToggle';
|
|
// import { COLLAPSE_THRESHOLD } from '@/config/index'; (可传，不传入全局配置走)
|
|
// const { changeCollapseIcon } = useCollapseToggle(designStore, COLLAPSE_THRESHOLD);
|
|
// </script>
|
|
// <template>
|
|
// <!-- 其他页面的按钮 -->
|
|
// <button @click="changeCollapseIcon">切换侧边栏</button>
|
|
// </template>
|