vue3中获取dom元素和操作实现方法

 更新时间:2023年06月20日 10:21:30   作者:笑道三千  
ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,下面这篇文章主要给大家介绍了关于vue3中获取dom元素和操作实现的相关资料,需要的朋友可以参考下

一、需求概述

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

二、实现思路

对应的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>

对应的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元素和操作实现方法的文章就介绍到这了,更多相关vue3获取dom元素和操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中render函数的使用方法

    Vue中render函数的使用方法

    本篇文章主要介绍了Vue中render函数的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue多页面配置详情

    vue多页面配置详情

    这篇文章主要介绍了vue多页面配置,单页应用这个概念,是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里,我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue学习笔记之slot插槽基本用法实例分析

    vue学习笔记之slot插槽基本用法实例分析

    这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结合实例形式分析了vue slot插槽基本使用方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • Vue3实现折叠面板组件的示例代码

    Vue3实现折叠面板组件的示例代码

    折叠面板大家都不陌生,很多时候需要实现一些复杂的交互,就会用到它,简洁直观还美观,下面就跟随小编一起学习一下如果使用Vue3实现折叠面板组件吧
    2024-01-01
  • vuex实现购物车的增加减少移除

    vuex实现购物车的增加减少移除

    这篇文章主要为大家详细介绍了vuex实现购物车的增加减少移除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    这篇文章主要介绍了vue cli3 项目中如何使用axios发送post请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于Vue源码vm.$watch()内部原理详解

    关于Vue源码vm.$watch()内部原理详解

    这篇文章主要介绍了关于Vue源码vm.$watch()内部原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue 权限控制的两种方法(路由验证)

    Vue 权限控制的两种方法(路由验证)

    这篇文章主要介绍了Vue 权限控制的两种方法(路由验证),每种方法给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 基于Vue2x的图片预览插件的示例代码

    基于Vue2x的图片预览插件的示例代码

    本篇文章主要介绍了基于Vue2x的图片预览插件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 基于vue封装下拉刷新上拉加载组件

    基于vue封装下拉刷新上拉加载组件

    这篇文章主要为大家详细介绍了基于vue封装下拉刷新上拉加载组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论