偵測 Vue.js 的 DatePicker 元件是否有載入 [eleme.io]

當網路異常導致 Vue.js 的 DatePicker 元件 ( 來自 Element - A Desktop UI Toolkit for Web) 沒有載入時，導致網頁功能故障。透過 JavaScript 偵測 DatePicker 產生的 class 網頁 DOM 元件是否存在。

Logo of Vue.js

問題狀況:

沒有成功載入 DatePicker 元件，導致網頁有一塊原本是選擇日期的區域變成空白

正常載入 DatePicker 元件的網頁畫面

解決方式:

觀察異常狀況的網頁原始碼

<div><div class="block"><el-date-picker type="daterange" align="right" unlink-panels="" range-separator="~" start-placeholder="文章開始日期" end-placeholder="文章結束日期" format="yyyy/MM/dd" value-format="yyyy/MM/dd" picker-options="[object Object]"></el-date-picker></div> <br> <br></div>

與正常狀況的網頁原始碼比較

<div class="block"><div class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange"><i class="el-input__icon el-range__icon el-icon-date"></i><input autocomplete="off" placeholder="文章開始日期" name="" class="el-range-input"><span class="el-range-separator">~</span><input autocomplete="off" placeholder="文章結束日期" name="" class="el-range-input"><i class="el-input__icon el-range__close-icon"></i></div></div>

判斷有沒有順利載入 DatePicker 元件的條件，是偵測 class name 「el-date-editor」的 DOM element 有沒有存在。JavaScript 語法如下:

<script>

window.onload = function(e) {
var error = "";
if(!window.Vue){
error = error.concat("Vue.js is not loaded! ");
}
if(!window.VueResource){
error = error.concat("VueResource is not loaded! ");
}
if (document.getElementsByClassName("el-date-editor").length == 0) {
error = error.concat("DatePicker is not loaded! ");
}
if(error.length > 0){
alert(error;)
}
};
</script>

相關資料:

• javascript - window.onload vs document.onload - Stack Overflow
• HTML DOM Element Objects

Logo 來源:
Vue.js