uniapp vue3.0获取dom元素

uniApp是基于Vue.js的跨平台开发框架，它允许开发者构建一次，部署到多个平台上，如微信小程序、H5、iOS和Android等。在Vue 3.0中，获取DOM元素通常通过Vue实例提供的`$refs`属性或者自定义指令来完成。

1. 使用 `$refs`: 当你在模板中声明了一个ref，并给它一个名称，例如 `<div ref="myDiv">Hello</div>`，然后可以在Vue组件的methods或生命周期钩子函数中通过this.$refs.myDiv访问这个DOM元素。

export default {
  setup() {
    const myDivRef = ref(null); // 或者 this.$refs.myDiv
    onMounted(() => {
      console.log(myDivRef.value); // 输出div元素
    });
    return { myDivRef };
  }
}

2. 自定义指令 (v-once/v-model/v-bind等)：如果你需要动态操作DOM，可以使用自定义指令来绑定数据到特定的DOM属性。

<template>
  <div v-ref:elem>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup(props, context) {
    const elemRef = context.ref('elem'); // 获取DOM元素
    let message = ref('');
    //...
    return { message, elemRef };
  }
};
</script>