TypeScript下Quasar QDrawer组件width属性的数字类型写法疑问

核心原因 #

直接写width="100"时，Vue会把属性值解析为字符串类型，而QDrawer的width属性在TypeScript类型定义中期望接收数字（或带单位的字符串），因此触发类型不匹配报错。

正确写法 #

1. 模板中静态设置数字宽度

使用Vue的属性绑定语法（冒号前缀）传递数字值，确保类型为number：

<q-drawer :width="100" v-model="isDrawerOpen">
  <!-- 抽屉内容 -->
</q-drawer>

2. 动态绑定宽度变量

在<script setup>中定义数字类型变量，再绑定到width属性：

// script setup
const drawerWidth = 100; // 明确为number类型

<q-drawer :width="drawerWidth" v-model="isDrawerOpen">
  <!-- 抽屉内容 -->
</q-drawer>

3. 使用带单位的宽度（可选）

如果需要px、%等单位，直接传递字符串类型值即可，TS会自动匹配类型：

<q-drawer :width="`${drawerWidth}px`" v-model="isDrawerOpen">
</q-drawer>

或直接写静态字符串：

<q-drawer :width="`50%`" v-model="isDrawerOpen">
</q-drawer>

避坑提醒 #

• 不要写width="100"：无冒号的属性会被解析为字符串"100"，触发类型错误
• 不要用{100}：这是对象字面量，与width期望的number/string类型完全不兼容

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