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并修改了其样式