如何在页面左侧并排放置两个q-drawer组件？

可以实现左侧并排两个q-drawer组件，核心是调整第二个抽屉的定位逻辑，避免与第一个抽屉重叠。以下是修改后的可运行代码：

<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-layout view="hHh Lpr fFf" container style="height: 300px" class="shadow-2 rounded-borders">
      <q-header elevated :class="$q.dark.isActive ? 'bg-secondary' : 'bg-black'">
        <q-toolbar>
          <q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu"></q-btn>           
          <q-btn flat @click="drawerLeft2 = !drawerLeft2" round dense icon="menu"></q-btn>
          <q-toolbar-title>Header</q-toolbar-title>
        </q-toolbar>
      </q-header>

      <!-- 第一个左侧抽屉 -->
      <q-drawer
        v-model="drawerLeft"
        show-if-above
        :width="200"
        :breakpoint="700"
        elevated
        class="bg-primary text-white"
      >
        <q-scroll-area class="fit">
          <div class="q-pa-sm">
            <div v-for="n in 50" :key="n">左侧抽屉1 {{ n }} / 50</div>
          </div>
        </q-scroll-area>
      </q-drawer>
      
      <!-- 第二个左侧抽屉，通过动态left值实现并排 -->
      <q-drawer
        v-model="drawerLeft2"
        show-if-above
        :width="150"
        :breakpoint="700"
        elevated
        class="bg-red text-white"
        :style="{ left: drawerLeft ? '200px' : '0' }"
      >
        <q-scroll-area class="fit">
          <div class="q-pa-sm">
            <div v-for="n in 50" :key="n">左侧抽屉2 {{ n }} / 50</div>
          </div>
        </q-scroll-area>
      </q-drawer>

      <q-page-container>
        <q-page padding>
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          </p>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</div>

<script>
const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      drawerLeft: ref(false),
      drawerLeft2: ref(false)
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')
</script>

关键调整说明： #

• 给第二个q-drawer添加动态样式，当第一个抽屉展开时，将第二个抽屉的left值设为第一个抽屉的宽度（200px），实现并排显示；当第一个抽屉收起时，重置left为0
• 保留两个抽屉的show-if-above属性，确保在断点尺寸以上正常显示
• 可根据需求进一步优化，比如添加过渡动画、控制抽屉展开逻辑，提升交互体验

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