一，需求概述

直接举例子来说明吧，我想要做的是，遍历这几个菜单，获取他们的dom元素的宽度。当文字dom元素宽度太长的话，需要滚动显示文本。

二，实现思路

对应的html:

<div class="icon-box" ref="menu_item"><divclass="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>

对应的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的子节点

const menu_item = ref(null);
menu_item.value.children

3，获取某个元素节点的宽度

上文已经获取到dom节点，这里用vNode替代，于是该节点的宽度：

vNode.offsetWidth

有的时候，我们想通过vNode.style.width来获取。但是它只能获取js给定的width，无法获取css给定的width。所以这种方式获取到的会是空。

4，给某个dom节点添加class

vNode.classList.add('newClass')

四，获取到dom节点之后修改样式

主要就是取到dom元素节点之后。设置style属性

 headerOrangeMask: require('@/assets/img/header-blue-mask.png'), //首页顶部的我的图标

const myMask = ref(null);
nextTick(() => {myMask.value.style.backgroundImage = `url(${headerOrangeMask})`; //设置背景图片
});

五，父组件调用子组件的函数方法

1，第一步，子组件暴露要被父组件调用的方法

// 主动暴露childMethod方法
defineExpose({ noticeSwiper });
//公告轮播-父组件请求完成后调用
function noticeSwiper() {console.log("子组件中的方法执行了")
}

2，第二步，父组件中取得子组件的dom并调用方法

<Notice ref="noticeNode"></Notice>const noticeNode = ref(null); //公告组件的node
//获取公告信息
function getNotice() {store.dispatch('notice/getNoticeList').then(() => {noticeNode.value.noticeSwiper(); //调用子组件方法轮播公告});
}

vue3中获取dom元素和操作相关推荐

vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
js中获取dom元素高度
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度: 3. 总结: 4.参考博客: 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下: 网页可视区域宽: docum ...
VUE3.X——获取dom元素
在Vue2.X中,我们可以通过 this.$refs.XXX 来获取dom元素,但在Vue3.X中,$refs 被删除,而 setup() 函数的执行时间是在 beforeCreate 之前,这意味着 ...
在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以 ...
在vue3setup语法糖中获取DOM元素
1.给dom元素添加ref <a-form v-if="modalTitle==='新建指标'" :model="addForm" :rules=&quo ...
在vue中获取dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template><div><div id=& ...
vue 获取id元素_.vue组件中获取DOM元素问题
一.问题引入原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式. ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...

vue3中获取dom元素和操作