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