vue3如何獲取綁定頁面dom元素
更新時(shí)間：2023年11月15日 10:19:26 作者：夢(mèng)落飛雪
這篇文章主要介紹了vue3如何獲取綁定頁面dom元素問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3獲取綁定頁面dom元素
和vue2一樣，vue3也可以在頁面上通過ref綁定一個(gè)變量，
<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
}
}
}其實(shí)這還有優(yōu)化的空間，我們使用vue3比較重要的是使用ts語法，那么怎么指定ref綁定的dom的class對(duì)象呢，
我們可以不用在ref中寫null，在ref中指定某個(gè)類的原型，那么value就是這個(gè)類的對(duì)象，
我們可以使用js本身就有的Element對(duì)象，也可以自定義一個(gè)，
最終代碼如下所示：
① 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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05
vue webpack開發(fā)訪問后臺(tái)接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺(tái)接口全局配置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解vue-loader在項(xiàng)目中是如何配置的，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問題
今天小編就為大家分享一篇解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了vuex的五個(gè)核心概念和基本使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-09-09
Form組件提供了表單驗(yàn)證的功能,只需要通過屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于Element中el-form表單的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue如何實(shí)現(xiàn)Toast輕提示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue移動(dòng)端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時(shí)候都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突，這就很難受，這篇文章將解決它2023-04-04