vue中宽度动态设置的几种常用方法

我们可以使用resize事件，来动态的实时获取界面宽度，再把根据这个div与设计稿的比例，动态的设置宽度。通过addEventListener，把事件添加到了window上，当当前组件不用时，需要在onUnmounted中，将该事件销毁，节约资源。二、今天在使用vant组件进行开发时，vant组件中swipe中的宽度设置，只能接受px。一.一种常见的是使用vw的方式设置宽度，这样当我们的屏幕发生变

滴滴出行~

3503人浏览 · 2023-12-06 00:00:59

滴滴出行~ · 2023-12-06 00:00:59 发布

场景：当我们在项目开发中，有时候某个宽度，需要根据界面当前的宽度动态设置。

一.一种常见的是使用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的方式。

二、今天在使用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中，将该事件销毁，节约资源。

三、利用@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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^