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. el获取到子组件dom⑤通过tabBarRefProxy.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并修改了其样式