1. vue中獲取dom元素
- 正常情況
<template>
<div>
<span ref="domRef">我只是一段文字</span>
<div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
}
},
mounted() {
//獲取dom元素
console.log(this.$refs.domRef);
console.log(document.getElementById('domRef'));
},
methods: {
//獲取dom元素
getDom(){
const that = this;
// 使用 nextTick 確保dom渲染後，纔去獲取dom元素
that.$nextTick(() => {
console.log(this.$refs.domRef);
console.log(document.getElementById('domRef'));
})
}
}
}
</script>
<style lang="scss">
</style>
- 獲取dom爲空的情況
ref本身作爲渲染結果被創建，在初始渲染的時候不能訪問他們，是不存在的。
$refs不是響應式的，只在組件渲染完成後才填充。
用於元素或子組件註冊引用信息，註冊完成，將會註冊在父組件$refs對象上
如果你獲取到的總是空的，你注意一下：
-
你在哪裏調用，和你調用的對象，試試在mounted()裏面調用有效果沒有,調用的對象是本來就存在的，還是需要數據渲染之後纔會出現的。同理，在mounted()裏面調用看看
-
調用對象是不是數組列表，我一開始設置ref在v-for列表上，直接獲取this.$refs.name.style，永遠是空的，
後來才發現，this.$refs.name是一個數組，無法通過 .style 獲取樣式，只能遍歷這個this.$refs.name數組，在this.$refs.name[index]上設置樣式 -
調用對象是否和v-if結合使用，ref不是響應式的，所有的動態加載的模板更新它都無法相應的變化。
-
假設使用element-UI的dialog，如果div在dialog標籤裏面的話，必須先要把dialog展示出來才能獲取dom，大概因爲窗口未展示出來就未渲染dom，所以ref會獲取空。
2. Js字符串渲染Dom後綁定onclick事件
有些時候，需要在js裏面以字符串寫html代碼，然後調用第三方api進行渲染html（如：高德地圖的jsAPI）,然後又要在新渲染的dom裏面添加綁定事件觸發函數。網上找了一下資料，思路是使用window.function進行全局綁定onclick事件，然後在mounted裏面聲明全局的綁定事件，具體大概如下：
<template>
<div id="aaa">
<div id="container"></div>
</div>
</template>
<script>
export default {
data() {
return {
mapObj: null,
mapWin:null
}
},
mounted(){
this.mapObj= new AMap.Map("container", {
resizeEnable: true,
center: [116.481181, 39.989792],
zoom: 16
});
//聲明綁定關閉標點展示窗口的事件【關鍵代碼】
this.closeWin();
},
methods:{
//綁定關閉標點展示窗口的事件【關鍵函數】
closeWin() {
const that = this;
//窗口關閉事件
window.closeInfoWindow = function () {
that.mapWin.clearInfoWindow();
}
},
// 簡單引用官方的demo，介紹一下怎麼加dom
addWin(){
let title = '<span style="font-size:11px;color:#F00;">測試窗口</span>',
let content = [];
content.push("<a href='javascript:void(0);' onclick=‘closeWin()’>點擊關閉</a>");
this.mapWin = new AMap.InfoWindow({
isCustom: true, //使用自定義窗體
// 調用下面的方法往信息窗口加dom
content: that.createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
},
//構建窗口的dom【可以忽略】
createInfoWindow(title, content) {
let info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通過下面的方式修改自定義窗體的寬高
//info.style.width = "400px";
// 定義頂部標題
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定義中部內容
let middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定義底部內容
let bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
let sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
}
}
</script>
<style lang="scss">
</style>