vue3中獲取dom元素和操作實(shí)現(xiàn)方法
更新時(shí)間：2023年06月20日 10:21:30 作者：笑道三千
ref是Vue3中一個(gè)非常重要的功能,它可以用來獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,下面這篇文章主要給大家介紹了關(guān)于vue3中獲取dom元素和操作實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
一、需求概述
直接舉例子來說明吧，我想要做的是，遍歷這幾個(gè)菜單，獲取他們的dom元素的寬度。當(dāng)文字dom元素寬度太長(zhǎng)的話，需要滾動(dòng)顯示文本。
二、實(shí)現(xiàn)思路
對(duì)應(yīng)的html:
<div class="icon-box" ref="menu_item">
<div
class="menu-box"
v-for="(item, index) in iconMenus"
:key="index"
@click="clickItem(item)"
>
<span :class="[item.imageRef, 'item-image']"></span>
<div class="item-content">
{{ item.menuName }}
</div>
</div>
</div>對(duì)應(yīng)的css:
.menu-box {
width: 144px;
height: 144px;
margin-top: 5px;
flex-shrink: 0;
position: relative;
overflow: hidden;
.item-image {
display: block;
font-size: 60px;
padding: 15px;
&::before {
color: v-bind(zeroTheme);
}
}
.item-content {
font-size: 26px;
display: inline-block;
white-space: nowrap;
}
.item-content-flag {
font-size: 26px;
position: absolute;
display: inline-block;
white-space: nowrap;
left: 0;
bottom: 22px;
white-space: nowrap;
-webkit-animation: todayScroll 4s linear infinite;
animation: todayScroll 5s linear infinite;
}
}第一步：先通過ref獲取最外層容器的dom:
const menu_item = ref(null);
第二步：遍歷判斷，給超長(zhǎng)的dom添加class樣式
menu_item.value.children.forEach(element => {
let parentWith = element.offsetWidth;
let childrenWith = element.children[1].offsetWidth;
if (childrenWith >= parentWith - 10) {
element.children[1].classList.add('item-content-flag');
}
});三、由此得到vue3中常用的dom操作
1：獲取dom
<div class="icon-box" ref="menu_item"></div> const menu_item = ref(null);
2：獲取dom的子節(jié)點(diǎn)
const menu_item = ref(null); menu_item.value.children
3：獲取某個(gè)元素節(jié)點(diǎn)的寬度
上文已經(jīng)獲取到dom節(jié)點(diǎn)，這里用vNode替代，于是該節(jié)點(diǎn)的寬度：
vNode.offsetWidth
有的時(shí)候，我們想通過vNode.style.width來獲取。但是它只能獲取js給定的width，無法獲取css給定的width。所以這種方式獲取到的會(huì)是空。
4：給某個(gè)dom節(jié)點(diǎn)添加class
vNode.classList.add('newClass')四、獲取到dom節(jié)點(diǎn)之后修改樣式
主要就是取到dom元素節(jié)點(diǎn)之后。設(shè)置style屬性
headerOrangeMask: require('@/assets/img/header-blue-mask.png'), //首頁(yè)頂部的我的圖標(biāo)const myMask = ref(null);
nextTick(() => {
myMask.value.style.backgroundImage = `url(${headerOrangeMask})`; //設(shè)置背景圖片
});五、父組件調(diào)用子組件的函數(shù)方法
1：第一步，子組件暴露要被父組件調(diào)用的方法
// 主動(dòng)暴露childMethod方法
defineExpose({ noticeSwiper });
//公告輪播-父組件請(qǐng)求完成后調(diào)用
function noticeSwiper() {
console.log("子組件中的方法執(zhí)行了")
}2：第二步，父組件中取得子組件的dom并調(diào)用方法
<Notice ref="noticeNode"></Notice>
const noticeNode = ref(null); //公告組件的node
//獲取公告信息
function getNotice() {
store.dispatch('notice/getNoticeList').then(() => {
noticeNode.value.noticeSwiper(); //調(diào)用子組件方法輪播公告
});
}總結(jié)
到此這篇關(guān)于vue3中獲取dom元素和操作實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue3獲取dom元素和操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue多頁(yè)面配置，單頁(yè)應(yīng)用這個(gè)概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內(nèi)容里，我們?cè)陧?yè)面渲染中講了頁(yè)面的局部刷新,而單頁(yè)應(yīng)用則是使用了頁(yè)面的局部刷新的能力,下面來看看詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue學(xué)習(xí)筆記之slot插槽基本用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽基本用法,結(jié)合實(shí)例形式分析了vue slot插槽基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
折疊面板大家都不陌生,很多時(shí)候需要實(shí)現(xiàn)一些復(fù)雜的交互,就會(huì)用到它,簡(jiǎn)潔直觀還美觀,下面就跟隨小編一起學(xué)習(xí)一下如果使用Vue3實(shí)現(xiàn)折疊面板組件吧2024-01-01
vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求
這篇文章主要介紹了vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解
這篇文章主要介紹了關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)
這篇文章主要介紹了Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)，每種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了基于vue封裝下拉刷新上拉加載組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09