vue之宽度动态设置的几种常用方式
作者：滴滴出行~
这段文章介绍了如何在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 是否提供，这样可以提高开发效率。
窗口尺寸，滚动距离，是否进入可视区，倒计时，...等等
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。