vue3中獲取dom元素和操作實(shí)現(xiàn)方法
更新時間：2023年06月20日 10:21:30 作者：笑道三千
ref是Vue3中一個非常重要的功能,它可以用來獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對DOM節(jié)點(diǎn)的操作,下面這篇文章主要給大家介紹了關(guān)于vue3中獲取dom元素和操作實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
一、需求概述
直接舉例子來說明吧，我想要做的是，遍歷這幾個菜單，獲取他們的dom元素的寬度。當(dāng)文字dom元素寬度太長的話，需要滾動顯示文本。
二、實(shí)現(xiàn)思路
對應(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>對應(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);
第二步：遍歷判斷，給超長的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：獲取某個元素節(jié)點(diǎn)的寬度
上文已經(jīng)獲取到dom節(jié)點(diǎn)，這里用vNode替代，于是該節(jié)點(diǎn)的寬度：
vNode.offsetWidth
有的時候，我們想通過vNode.style.width來獲取。但是它只能獲取js給定的width，無法獲取css給定的width。所以這種方式獲取到的會是空。
4：給某個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'), //首頁頂部的我的圖標(biāo)const myMask = ref(null);
nextTick(() => {
myMask.value.style.backgroundImage = `url(${headerOrangeMask})`; //設(shè)置背景圖片
});五、父組件調(diào)用子組件的函數(shù)方法
1：第一步，子組件暴露要被父組件調(diào)用的方法
// 主動暴露childMethod方法
defineExpose({ noticeSwiper });
//公告輪播-父組件請求完成后調(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
html2canvas.js是一款可以在網(wǎng)頁上實(shí)現(xiàn)頁面截圖的js,它使用了html5和css3的一些新功能特性,實(shí)現(xiàn)了在客戶端對網(wǎng)頁進(jìn)行截圖的功能,這篇文章主要給大家介紹了關(guān)于html2canvas使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
深入淺析golang zap 日志庫使用（含文件切割、分級別存儲和全局使用等）
這篇文章主要介紹了golang zap 日志庫使用（含文件切割、分級別存儲和全局使用等）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家介紹了vue整合項目中百度API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了Vue編寫炫酷的時鐘插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue.js使用Element-ui實(shí)現(xiàn)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了vue.js使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號碼的示例
本篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號碼的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
如何實(shí)現(xiàn)vue加載指令 v-loading
在日常的開發(fā)中,加載效果是非常常見的,但是怎么才能方便的使用,本文介紹如何實(shí)現(xiàn)vue加載指令 v-loading,感興趣的朋友一起看看吧2024-01-01