vue3如何獲取綁定頁面dom元素
vue3獲取綁定頁面dom元素
和vue2一樣,vue3也可以在頁面上通過ref綁定一個變量,
<div ref="domRef"></div>
但vue2使用this.$refs可以獲取綁定的變量,而vue3雖然已經(jīng)刪除了this,但可以用以下方法綁定元素
在setup方法中使用vue提供的ref綁定元素,網(wǎng)上大部分是使用
import { onMounted, ref } from "vue"; export default{ setup() { const domRef = ref(null) onMounted(() => { console.log(domRef.value) }) retrurn { domRef } } }
其實這還有優(yōu)化的空間,我們使用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 } } }
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue webpack開發(fā)訪問后臺接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺接口全局配置的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09