Quasar q-drawer切换mini状态出现水平滚动条及长文本换行异常求解

问题排查结论 #

你的代码逻辑没有问题，两个异常都是Quasar的q-drawer切换mini状态时，内部内容重绘计算延迟导致的原生组件渲染问题，通过补充样式覆盖即可解决：

问题1：mini状态切换后出现多余水平滚动条 #

解决方案 #

给q-scroll-area添加禁用水平溢出的样式，保留垂直滚动能力：

1. 给q-scroll-area添加自定义类名：

<q-scroll-area class="fit sidebar-scroll">

2. 在样式块中添加规则（scoped模式下需要用深度选择器）：

<style scoped>
/* 禁用滚动容器水平滚动 */
:deep(.sidebar-scroll),
:deep(.sidebar-scroll .q-scroll-area__content) {
  overflow-x: hidden !important;
}
</style>

问题2：切换mini后展开长文本不换行/溢出 #

解决方案 #

给带q-mini-drawer-hide的文本容器强制添加换行/溢出省略规则，两种方案按需选择：

方案A：长文本自动换行

<style scoped>
:deep(.q-mini-drawer-hide) {
  width: 100%;
  white-space: normal;
  word-break: break-all;
}
</style>

方案B：长文本超出显示省略号（更适配侧边栏场景）

<style scoped>
:deep(.q-mini-drawer-hide) {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

内容的提问来源于stack exchange，提问作者Vaclav Pelc