vue之寬度動態(tài)設置的幾種常用方式
更新時間：2026年05月31日 10:40:48 作者：滴滴出行~
這段文章介紹了如何在Vue項目中根據(jù)窗口尺寸動態(tài)設置元素寬度的方法,重點提及了vw單位、resize事件及@vueuse/core庫的應用,適用于前端開發(fā)人員優(yōu)化布局適應性屏幕
場景
當我們在項目開發(fā)中，有時候某個寬度，需要根據(jù)界面當前的寬度動態(tài)設置。
1、一種常見的是使用vw的方式設置寬度
這樣當我們的屏幕發(fā)生變化時，可以跟著動態(tài)的修改。
<!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組件進行開發(fā)時
vant組件中swipe中的寬度設置，只能接受px。
這時候就不能通過vw直接粗暴的設置。我們可以使用resize事件，來動態(tài)的實時獲取界面寬度，再把根據(jù)這個div與設計稿的比例，動態(tài)的設置寬度。
可以通過以下代碼實現(xiàn)。
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中，將該事件銷毀，節(jié)約資源。
3、利用@vueuse/core這個包，幫助我們快速的實現(xiàn)
1、下載：
pnpm add @vueuse/core
2.使用
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
這時候，獲取到的width可以跟著我們屏幕尺寸變化而動態(tài)變化。
3.最后附上vueUse官網(wǎng)：https://v4-11-2.vueuse.org/
如果遇見一些常見的需求可以先看看 @vueuse/core 是否提供，這樣可以提高開發(fā)效率。
窗口尺寸，滾動距離，是否進入可視區(qū)，倒計時，...等等
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了ant-design-vue導航菜單a-menu的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了詳解Vue3.0 前的 TypeScript 最佳入門實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)雙向綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
Vue3使用路由及配置vite.alias簡化導入寫法的過程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡化導入寫法，本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
vue中使用cookies和crypto-js實現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實現(xiàn)密碼的加密與記住密碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。2018-10-10
vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案
最近在vue項目中引入vant的時候發(fā)現(xiàn)報錯了,經(jīng)過嘗試發(fā)現(xiàn)了問題,現(xiàn)將完整引入流程提供給大家參考,下面這篇文章主要給大家介紹了關(guān)于vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案,需要的朋友可以參考下2022-12-12
使用Vue3+ts?開發(fā)ProTable源碼教程示例
這篇文章主要為大家介紹了使用Vue3+ts?開發(fā)ProTable源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了在Vue中使用HOC模式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
Echarts實現(xiàn)一張圖現(xiàn)切換不同的X軸(實例代碼)
這篇文章主要介紹了Echarts 如何實現(xiàn)一張圖現(xiàn)切換不同的X軸,通過動圖給大家展示效果，實例代碼相結(jié)合給大家介紹的非常詳細，需要的朋友可以參考下2021-11-11