vue之宽度动态设置的几种常用方式
更新时间：2026年05月31日 10:40:48 作者：滴滴出行~
这段文章介绍了如何在Vue项目中根据窗口尺寸动态设置元素宽度的方法,重点提及了vw单位、resize事件及@vueuse/core库的应用,适用于前端开发人员优化布局适应性屏幕
场景
当我们在项目开发中，有时候某个宽度，需要根据界面当前的宽度动态设置。
1、一种常见的是使用vw的方式设置宽度
这样当我们的屏幕发生变化时，可以跟着动态的修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.div {
width: 20vw;
height: 50px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
</html>可以在设置宽度时，采用vw的方式。
2、今天在使用vant组件进行开发时
vant组件中swipe中的宽度设置，只能接受px。
这时候就不能通过vw直接粗暴的设置。我们可以使用resize事件，来动态的实时获取界面宽度，再把根据这个div与设计稿的比例，动态的设置宽度。
可以通过以下代码实现。
import { onMounted, onUnmounted, ref } from 'vue'
const width = ref(0)
const setWidth = () => width.value = window.innerWidth
onMounted(() => {
setWidth()
window.addEventListener('resize', setWidth)
})
onUnmounted(()=>{
window.removeEventListener('resize', setWidth)
})通过addEventListener，把事件添加到了window上，当当前组件不用时，需要在onUnmounted中，将该事件销毁，节约资源。
3、利用@vueuse/core这个包，帮助我们快速的实现
1、下载：
pnpm add @vueuse/core
2.使用
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
这时候，获取到的width可以跟着我们屏幕尺寸变化而动态变化。
3.最后附上vueUse官网：https://v4-11-2.vueuse.org/
如果遇见一些常见的需求可以先看看 @vueuse/core 是否提供，这样可以提高开发效率。
窗口尺寸，滚动距离，是否进入可视区，倒计时，...等等
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了构建大型 Vue.js 项目的10条建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
本篇文章主要介绍了vuejs2.0子组件改变父组件的数据实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了vue实现价格日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
Vue.js中this如何取到data和method里的属性详解
methods属性是一个对象,通常我们会在这个对象中定义很多的方法,下面这篇文章主要给大家介绍了关于Vue.js中this如何取到data和method里的属性,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue项目中路由跳转页面不变问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
一个优雅展示树形结构数据的 Vue 组件,递归渲染每个节点及其子节点,支持自定义颜色、文本和布局,通过独特的样式巧妙处理不同层级,为用户打造丰富的视觉盛宴,文中通过代码给大家介绍的非常详细,感兴趣的同学可以自己动手尝试一下2024-02-02
这篇文章主要为大家介绍了vue组件historyApiFallback作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
element-ui table使用type='selection'复选框全禁用(全选禁用)详解
element-ui中的table的多选很好用,但是如果其中某一项禁止选择,该怎样操作呢,下面这篇文章主要给大家介绍了关于element-ui table使用type='selection'复选框全禁用(全选禁用)的相关资料,需要的朋友可以参考下2023-01-01
在 Vue2 项目中,将网页内容转换为图片并保存到本地,常常可以通过第三方库实现,本文为大家整理了常用方案,实现步骤及示例代码,需要的可以了解下2025-05-05
iview table render集成switch开关的实例
下面小编就为大家分享一篇iview table render集成switch开关的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论