亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue頁(yè)面中使用getElementsByClassName無(wú)法獲取元素的解決

 更新時(shí)間：2024年03月04日 11:03:54   投稿：jingxian  
這篇文章主要介紹了vue頁(yè)面中使用getElementsByClassName無(wú)法獲取元素的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、問(wèn)題描述

在vue頁(yè)面中，使用getElementsByClassName獲取dom，發(fā)覺(jué)總是獲取不到，返回的數(shù)組，空空如也，長(zhǎng)度為0。

二、問(wèn)題分析

據(jù)說(shuō)這是由于vue的機(jī)制造成的。 需要等所有內(nèi)容都掛載完畢才行。

具體內(nèi)容可見(jiàn)參看這篇文章。要使用nextTick。

我印象中，nextTick好像總是與onMounted一起使用。但其實(shí)不是。

以下例子中，nextTick就沒(méi)有跟onMounted放在一起，而是位于外部調(diào)用的開(kāi)關(guān)方法，跟隨事件而觸發(fā)。

三、問(wèn)題解決

以下代碼，是一個(gè)組件，響應(yīng)外部調(diào)用傳過(guò)來(lái)的參數(shù)，展示或隱藏不同的內(nèi)容，并且執(zhí)行初始化動(dòng)作。

初始化時(shí)，需要使用getElementsByClassName獲取dom。

初始化方法需要放在nextTick()里執(zhí)行，才能獲取指定class的dom。

<template>
  <div id="tjContainer">
    <div v-if="state.water" class="tj-container">內(nèi)容一</div>
    <div v-if="state.zone" class="tj-container">內(nèi)容二</div>
    <div v-if="state.red" class="tj-container">內(nèi)容三</div>
  </div>
</template>

<script setup>
const state = reactive({
  targ: "",
  water: false,
  zone: false,
  red: false,
});

const showOrHide = (targ, status) => {
  state.targ = targ;
  const t = targ.toLowerCase();
  if (t === "water") state.water = status;
  else if (t === "zone") state.zone = status;
  else if (t === "red") state.red = status;

  nextTick(() => {//nextTick，不一定要用在onMounted里
    dragInit();
  });
};
const show = (targ) => {
  showOrHide(targ, true);
};
const hide = (targ) => {
  showOrHide(targ, false);
};
defineExpose({ show, hide });//外部可以調(diào)用這兩個(gè)方法

function dragInit() {
  const dom = document.getElementById("tjContainer");
  const els = dom.getElementsByClassName("tj-container");
  if (els.length === 0) {
    console.log("找不到class='tj-container'的元素");
    return;
  }
  const drag = els[0];
  //大展宏圖，吧啦吧啦吧啦
}
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論