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

最新推荐文章于 2024-08-14 18:44:30 发布

滴滴出行~

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量2.9k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45155922/article/details/134819994

版权

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

一.一种常见的是使用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 是否提供，这样可以提高开发效率。

窗口尺寸，滚动距离，是否进入可视区，倒计时，...等等

滴滴出行~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue中宽度动态设置的几种常用方法

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

扫一扫