在Vue的mounted中仍然加載渲染不出echarts的方法問(wèn)題
問(wèn)題
問(wèn)題的主要原因是在mounted中無(wú)法獲取到dom元素
<template>
<div>
<div ref="echarts"></div>
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$$refs.echarts); // undefined
},
}
</script>知道了問(wèn)題在哪里，那就從根源下手：
這是因?yàn)槟承┮蛩厥沟迷趍ounted中還并沒(méi)有生成dom，所以結(jié)果自然就是undefined，那怎樣才能獲取到這個(gè)dom元素？
解決方法1（完美解決+超簡(jiǎn)單）
直接把初始化方法寫(xiě)在updated生命周期中
methods: {
initEcharts() {
echarts.init(this.$refs.echarts).setOption(option);
}
},
updated() {
this.initEcharts();
}解決方法2（完美解決+復(fù)雜）
使用自定義指令
我們自己設(shè)置一個(gè)自定義屬性，去監(jiān)測(cè)dom是什么時(shí)候生成的，在dom生成的時(shí)候立刻將echarts渲染到頁(yè)面上。
這個(gè)方法完美解決了加定時(shí)器有延時(shí)的缺點(diǎn)。
<template>
<div>
<div ref="echarts" v-init="option"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
option: {
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
legend: {
data: ['銷(xiāo)量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
}
},
directives: {
init: {
// inserted: 在dom元素成功插入父節(jié)點(diǎn)時(shí)的鉤子函數(shù)
inserted(el, binding) {
echarts.init(el).setOption(binding.value);
}
}
},
}
</script>解決方法3（有缺陷+超簡(jiǎn)單）
在初始化方法外面套一層定時(shí)器
在初始化方法外面套一層定時(shí)器：等dom生成了之后我們?cè)偃カ@取這個(gè)dom元素
methods: {
initEcharts() {
echarts.init(this.$refs.echarts).setOption(option);
}
},
mounted () {
setTimeout(() => {
this.initEcharts();
}, 500)
},這個(gè)方法有一個(gè)很大的缺點(diǎn)，就是我們要自己去設(shè)置定時(shí)器的時(shí)間，就有可能會(huì)造成頁(yè)面的渲染和echarts的渲染不同步，頁(yè)面顯示出來(lái)了之后echarts可能要過(guò)一會(huì)兒才會(huì)出現(xiàn)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺析Vue為什么需要同時(shí)使用Ref和Reactive
這篇文章主要想來(lái)和大家一起探討一下Vue為什么需要同時(shí)使用Ref和Reactive，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
這篇文章主要介紹了Vue.js組件高級(jí)特性,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件遞歸、模板、動(dòng)態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用詳解
導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案
v-for標(biāo)簽可以用來(lái)遍歷數(shù)組，將數(shù)組的每一個(gè)值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
vue+elementui 實(shí)現(xiàn)新增和修改共用一個(gè)彈框的完整代碼
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架，手機(jī)端有對(duì)應(yīng)框架是Mint UI ，今天給大家普及vue+elementui 實(shí)現(xiàn)新增和修改共用一個(gè)彈框的完整代碼，一起看看吧2021-06-06
el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn)
本文主要介紹了el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
Vue中動(dòng)畫(huà)與過(guò)渡的使用教程
最近在寫(xiě)vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫(huà)不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫(kù),可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue.js?是一個(gè)用于構(gòu)建用戶(hù)界面的漸進(jìn)式?JavaScript?框架,它提供了多種方法來(lái)實(shí)現(xiàn)頁(yè)面之間的導(dǎo)航,本文將詳細(xì)介紹?Vue?3?中的各種頁(yè)面跳轉(zhuǎn)方式,有需要的小伙伴可以參考一下2024-12-12