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

2023-01-22 14:49| 来源: 网络整理| 查看: 265

vue3通过ref获取dom元素并修改样式获取dom元素获取子组件的dom元素获取dom元素

vue3获取dom元素和vue2类似，都是通过ref来获取，请看以下示例： ①元素中通过ref获取元素boxOneRef ②state中创建boxOneRef属性 ③重新创建变量boxOneProxy，并赋值为state.boxOneRef,使之成为state.boxOneRef的代理对象（因为state.boxOneRef属于proxy对象，必须通过代理对象来修改其内部属性） ④通过boxOneRefProxy.style修改dom元素样式

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

可以看得到成功获取到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元素样式

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({ 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), }; }, }); @import './Index.scss'; 复制代码

可以看得到成功获取到子组件TabBar的真实dom并修改了其样式在这里插入图片描述

【本文地址】

公司简介

联系我们