vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3获取绑定页面dom元素

vue3如何获取绑定页面dom元素

作者:梦落飞雪

这篇文章主要介绍了vue3如何获取绑定页面dom元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3获取绑定页面dom元素

和vue2一样,vue3也可以在页面上通过ref绑定一个变量,

<div ref="domRef"></div>

但vue2使用this.$refs可以获取绑定的变量,而vue3虽然已经删除了this,但可以用以下方法绑定元素

在setup方法中使用vue提供的ref绑定元素,网上大部分是使用

import { onMounted, ref } from "vue";
export default{
    setup() {
        const domRef = ref(null)
        onMounted(() => {
            console.log(domRef.value)
        })
        retrurn {
            domRef
        }
    }
}

其实这还有优化的空间,我们使用vue3比较重要的是使用ts语法,那么怎么指定ref绑定的dom的class对象呢,

我们可以不用在ref中写null,在ref中指定某个类的原型,那么value就是这个类的对象,

我们可以使用js本身就有的Element对象,也可以自定义一个,

最终代码如下所示:

① Ele.ts文件

用于声明class类局部使用,也可以使用.d.ts文件直接全局声明

export default class Ele {
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  constructor() {}
  clientHeight!: number;
  clientWidth!: number;
  style!: {
    top: number | string;
    left: number | string;
    bottom: number | string;
    right: number | string;
    display: "inline-block" | "none";
  };
}

② 通过Ele绑定ref

import { onMounted, ref } from "vue";
import Ele from "@/class/Ele";
export default{
    setup() {
        const domRef = ref(Ele.prototype)
        onMounted(() => {
            const dom: Ele = domRef.value;
            console.log(dom)
        })
        retrurn {
            domRef
        }
    }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文