您看到的 <div class="t-default-menu t-menu--light tdesign-starter-side-nav" style="height: 100%; width: 232px;">
是由 TDesign 菜單組件運行時(shí)生成的。
在 src/style/layout.less
文件中添加或修改:
// ?? 自定義側邊欄寬度
.@{starter-prefix}-side-nav {
width: 280px !important; // ?? 修改為您想要的寬度
// ?? 暗色模式下的寬度
&.t-menu--dark {
width: 280px !important;
}
}
// ?? 響應式寬度調整
@media screen and (max-width: 768px) {
.@{starter-prefix}-side-nav {
width: 200px !important; // ?? 移動(dòng)端較小寬度
}
}
// ?? 折疊狀態(tài)下的寬度調整
.@{starter-prefix}-sidebar-compact {
width: 64px; // ?? 折疊狀態(tài)寬度
}
在 src/style/variables.less
中添加:
// ?? 菜單寬度變量定義
@sidebar-width: 280px; // ?? 展開(kāi)狀態(tài)寬度
@sidebar-collapsed-width: 80px; // ?? 折疊狀態(tài)寬度
// ?? 響應式寬度變量
@sidebar-width-tablet: 240px; // ?? 平板寬度
@sidebar-width-mobile: 200px; // ?? 手機寬度
然后在 src/style/layout.less
中使用:
.@{starter-prefix}-side-nav {
width: @sidebar-width !important;
}
.@{starter-prefix}-sidebar-compact {
width: @sidebar-collapsed-width;
}
檢查 src/layouts/components/SideNav.vue
是否支持寬度屬性:
<template>
<div :class="sideNavCls">
<t-menu
:class="menuCls"
:style="{ width: customWidth }"
:theme="theme"
...
>
</div>
</template>
<script setup lang="ts">
// ?? 自定義寬度
const customWidth = computed(() => {
return collapsed.value ? '80px' : '280px';
});
</script>
// src/style/layout.less
.@{starter-prefix}-side-nav {
width: 280px !important; // ?? 從 232px 改為 280px
// ?? 平滑過(guò)渡效果
transition: width 0.3s cubic-bezier(0.38, 0, 0.24, 1);
}
// ?? 占位符寬度也需要調整
.@{starter-prefix}-side-nav-placeholder {
flex: 1 1 280px; // ?? 從 200px 改為 280px
min-width: 280px;
&-hidden {
flex: 1 1 80px; // ?? 折疊狀態(tài)寬度
min-width: 80px;
}
}
// ?? 主內容區域適配新的側邊欄寬度
.@{starter-prefix}-layout {
margin-left: 280px; // ?? 與側邊欄寬度保持一致
// ?? 折疊狀態(tài)下的邊距
&.sidebar-collapsed {
margin-left: 80px;
}
}
// ?? 移動(dòng)端適配
@media screen and (max-width: 992px) {
.@{starter-prefix}-side-nav {
width: 100% !important;
position: fixed;
z-index: 1000;
}
.@{starter-prefix}-layout {
margin-left: 0 !important;
}
}
// src/store/modules/setting.ts
export const useSettingStore = defineStore('setting', {
state: () => ({
sidebarWidth: 232, // ?? 可配置的側邊欄寬度
sidebarCollapsedWidth: 64,
}),
actions: {
setSidebarWidth(width: number) {
this.sidebarWidth = width;
// ?? 動(dòng)態(tài)更新 CSS 變量
document.documentElement.style.setProperty('--sidebar-width', `${width}px`);
}
}
});
<!-- 用戶(hù)設置面板 -->
<template>
<t-slider
v-model="sidebarWidth"
:min="200"
:max="400"
:step="10"
@change="handleWidthChange"
/>
</template>
<script setup lang="ts">
const handleWidthChange = (width: number) => {
settingStore.setSidebarWidth(width);
};
</script>
.tdesign-starter-side-nav
元素width
值/* 優(yōu)先級從低到高 */
.t-menu { width: 232px; } /* TDesign 默認樣式 */
.tdesign-starter-side-nav { width: 280px; } /* 自定義樣式 */
.tdesign-starter-side-nav { width: 280px !important; } /* 強制覆蓋 */
現在您可以根據需要調整左側菜單的寬度了!??