Naive UI 的 Drawer 抽屉怎么动态修改宽度？

淑霞酱~ 提问于 2026-03-18 05:43:24 阅读 20

组件

我在用 Naive UI 的 Drawer 组件，想根据屏幕尺寸动态调整抽屉的宽度。比如在桌面端设成 600px，移动端变成 100%。我试过直接绑定 width 属性：:width="drawerWidth"，但发现第一次打开正常，切换后宽度没更新。

是不是需要手动调用什么方法刷新？或者我的写法有问题？下面是我的基本结构：

<template>
  <n-button @click="showDrawer = true">打开</n-button>
  <n-drawer v-model:show="showDrawer" :width="drawerWidth">
    <n-drawer-content>内容</n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
const showDrawer = ref(false)
const drawerWidth = computed(() => window.innerWidth < 768 ? '100%' : 600)
</script>

我来解答赞 7 收藏

反馈

1 条解答

一迁迁 Lv1

问题在于你的 computed 依赖 window.innerWidth，但这个值在 Vue 里不会自动响应式更新。你需要手动监听 resize 事件。

改一下就行：

核心思路：把 window.innerWidth 存成响应式 ref，然后监听 resize 事件更新它，这样 computed 才能重新计算。

如果你用的是 Naive UI，还可以更偷懒一点，用自带的响应式断点：

import { useBreakpoint } from 'naive-ui'



const breakpoint = useBreakpoint()

const drawerWidth = computed(() => breakpoint.value === 's' ? '100%' : 600)

这个 useBreakpoint 会自动监听屏幕变化，返回 'xs' 's' 'm' 'l' 'xl' 等断点值，比自己写 resize 方便。

2026-03-18 13:12