vue3通过ref获取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>

<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>