vue3通过ref获取dom元素并修改样式

简介: vue3通过ref获取dom元素并修改样式


获取dom元素

vue3获取dom元素和vue2类似,都是通过ref来获取,请看以下示例:

①元素中通过ref获取元素boxOneRef

②state中创建boxOneRef属性

③重新创建变量boxOneProxy,并赋值为state.boxOneRef,使之成为state.boxOneRef的代理对象(因为state.boxOneRef属于proxy对象,必须通过代理对象来修改其内部属性)

④通过boxOneRefProxy.style修改dom元素样式

<template>
  <div class="page relative-page">
    <div class="box-one" ref="boxOneRef"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
export default defineComponent({
  name: 'Index',
  // 注册组件
  components: {
    TabBar,
  },
  setup() {
    const state = reactive<any>({
      boxOneRef: null,
    })
      
    onMounted(() => {
      console.log(state.boxOneRef)
      const boxOneProxy: any = state.boxOneRef; // 必须要赋值,因为state.boxOneRef是一个Proxy对象,必须通过代理对象来修改其内部属性
        boxOneRefProxy.style.zIndex = 9; // 通过代理对象修改dom元素样式
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
@import './Index.scss';
</style>

可以看得到成功获取到boxOne并修改了其样式

获取子组件的dom元素

vue3获取子组件的dom元素也和vue2类似,都是通过ref来获取,请看以下示例:

①元素中通过ref获取子组件TabBar

②state中创建tabBarRef属性

③重新创建变量tabBarRefProxy,并赋值为state.tabBarRef,使之成为state.tabBarRef的代理对象(因为state.tabBarRef属于proxy对象,必须通过代理对象来修改其内部属性)

④通过tabBarRefProxy.e l 获 取 到 子 组 件 d o m ⑤ 通 过 t a b B a r R e f P r o x y . el获取到子组件dom ⑤通过tabBarRefProxy.eldomtabBarRefProxy.el.style修改dom元素样式

<template>
  <div class="page relative-page">
    <TabBar ref="tabBarRef" />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import TabBar from '@/component/TabBar/TabBar.vue';
export default defineComponent({
  name: 'Index',
  // 注册组件
  components: {
    TabBar,
  },
  setup() {
    const state = reactive<any>({
      tabBarRef: null, // 底部导航栏组件
    })
      
    onMounted(() => {
      const tabBarRefProxy: any = state.tabBarRef; // 必须要赋值,因为state.tabBarRef是一个Proxy对象,必须通过代理对象来修改
      tabBarRefProxy.$el.style.zIndex = 9; // 通过tabBarRefProxy.$el获取到子组件dom,并通过tabBarRefProxy.$el.style修改dom样式
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
@import './Index.scss';
</style>

可以看得到成功获取到子组件TabBar的真实dom并修改了其样式

目录
相关文章
|
18小时前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
2 0
|
2天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
17 1
|
2天前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
8 2
|
3天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
16 0
|
3天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
3天前
|
缓存 JavaScript 前端开发
JavaScript中DOM操作:新手常犯错误与避免策略
【4月更文挑战第1天】本文介绍了JavaScript中DOM操作的基础和新手常犯错误,包括频繁查询DOM、不恰当的遍历、滥用innerHTML、忽视异步与DOM状态以及过度同步更新。建议包括缓存DOM引用、注意文本节点、慎用innerHTML以防止XSS、正确处理异步和批量更新。遵循最佳实践,开发者能提升代码质量和应用性能。
27 2
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
9 2
|
3天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
3天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
3天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)