我不得不从Vue.js 2和Vuetify切换到Vue.js 3和Quasar（因为Vuetify还不支持Vue.js 3官方）。我使用q-drawer和它的mini属性，我可以通过单击按钮在迷你状态和正常扩展状态之间切换。我这里有两个问题：
1.当我从mini状态开始时，展开并返回到mini状态会更改q-drawer中的布局，因此会显示一个水平滚动条，尽管开始时没有滚动条。可以在以下图片中看到此行为的说明：
第一次展开前无水平滚动条：

展开并再次切换到mini

后的水平滚动条
我尝试在q-item-section上使用q-mini-drawer-hide类，在mini模式下不应该可见，但是，在再次扩展和缩小后，内容的宽度仍然与以前不同。

问题：

有没有办法在保留q-scroll-area的垂直滚动功能的同时，防止显示水平滚动条？我的代码中是否有什么错误，使内容以一种意想不到的方式运行？
1.我的第二个问题是q-drawer中长文本的行为。当我在抽屉处于展开状态的情况下重新加载页面时，长文本被分成两行或更多行。这是一个期望的行为。然而，一旦我再次缩小和展开它，文本不再是多行，而是在q-drawer宽度之外的单行上，它有一个设定的宽度。下面的插图：
使用扩展的q-drawer

重新加载时出现多行长文本
在缩小和展开q-drawer之后，长文本位于q-drawer组件集宽度

之外的一行上

问题：

如何告诉q-drawer组件（或某些子组件）总是将文本分成多行？或者在文本上使用省略号？

重现问题的示例代码：

<template>
  <q-layout view="hHh Lpr fff">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar class="bg-black">
        <q-btn flat @click="toggleSidebar" round dense icon="mdi-menu" />
        <q-toolbar-title>
          A title
        </q-toolbar-title>
        <q-space></q-space>
        <q-btn flat round dense icon="mdi-dots-vertical"></q-btn>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="sidebar_open" side="left" elevated
      :mini="!sidebar_expanded"
      bordered
      :width="240"
      class="bg-grey-3">
      <q-scroll-area class="fit">
        <q-list>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-view-dashboard" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some text</q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-cube" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some other text</q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-clipboard-text" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some other other text</q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="mdi-cog" />
            </q-item-section>
            <q-item-section class="q-mini-drawer-hide">Some very very very very long text that should break</q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({

  setup() {
    //------------------------------------------------------------------------------------------------------------------
    // Basic setup
    //------------------------------------------------------------------------------------------------------------------
    const $store = useStore()

    const sidebar_open = ref(true)

    //------------------------------------------------------------------------------------------------------------------
    // Sidebar expansion functionality
    //------------------------------------------------------------------------------------------------------------------
    /**
     * The expansion state of the sidebar (true = expanded, false = mini)
     */
    const sidebar_expanded = computed({
      // For some reason, this needs to use the name of the store ('global' in this case) even with the namespacing disabled
      get() { return $store.state.global.sidebar_expanded },
      /** @param { boolean } value */
      set(value) { $store.dispatch('changeSidebarState', { expanded: value }) }
    })

    /**
     * Sets the sidebar expansion state to mini
     */
    const collapseSidebar = () => {
      sidebar_expanded.value = false
    }

    /**
     * Sets the sidebar expansion state to expanded
     */
    const expandSidebar = () => {
      sidebar_expanded.value = true
    }

    /**
     * Toggles the sidebar expansion state
     */
    const toggleSidebar = () => {
      if (sidebar_expanded.value) {
        collapseSidebar()
      } else {
        expandSidebar()
      }
    }

    return {
      sidebar_open,

      // Sidebar expansion functionality
      sidebar_expanded,
      toggleSidebar,
    }
  }
})
</script>

<style scoped>

</style>

• 注意：我使用的是mdi-v5图标，因为默认的material-design Quasar图标表现得很奇怪。