元素
元素
工具
博客
问答

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

淑霞酱~ 阅读 84
组件

我在用 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 收藏
二维码
手机扫码查看
反馈
2 条解答
欧辰🍀
欧辰🍀 Lv1
遇到这个问题，可能是由于组件没有监听窗口大小的变化，导致计算属性 drawerWidth 没有及时更新。你需要用一个监听器来监听窗口大小的变化，然后更新 drawerWidth。

你可以用 Vue 的 watch 或者 onMounted 和 onUnmounted 钩子函数来实现这个功能。这里给你个简单的例子：

import { ref, computed, onMounted, onUnmounted } from 'vue'



const showDrawer = ref(false)

const drawerWidth = computed(() => window.innerWidth < 768 ? '100%' : 600)



const handleResize = () => {

  // 这里不需要做额外操作，因为 drawerWidth 是计算属性，依赖于 window.innerWidth 会自动更新

}



onMounted(() => {

  window.addEventListener('resize', handleResize)

})



onUnmounted(() => {

  window.removeEventListener('resize', handleResize)

})


这样，每当窗口大小改变时，drawerWidth 会自动重新计算。确保你的模板部分保持不变，Vue 会自动处理视图的更新。希望这能解决你的问题，有时候这些小细节真是挺头疼的。
点赞
2026-03-24 11:09
一迁迁
一迁迁 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
相关推荐
元素
元素
工具
博客
问答
登录/注册