Vue-グローバルelement-resize-detectorリスニングDOM要素
947 ワード
ソリューション
ステップ1:npm install element-resize-detectorによるelementResizeDetectorMakerの取得
ステップ2:依存をimport elementResizeDetectorMaker from'element-resize-detectorに導入
ステップ3:使用する
ListenerとしてLambda式を使用しないと、JavaScriptのチュートリアルを参照して、dataとmethodsを取得できない場合があります.
ソリューション:
参考記事
vueある容器の大きさの変化を監視する(円グラフは容器の大きさの変化に適応する)
ステップ1:npm install element-resize-detectorによるelementResizeDetectorMakerの取得
npm install element-resize-detector
ステップ2:依存をimport elementResizeDetectorMaker from'element-resize-detectorに導入
import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()
ステップ3:使用する
this.$erd.listenTo(document.getElementById("chinaMapChart"), (element)=>{
this.resize()
})
ListenerとしてLambda式を使用しないと、JavaScriptのチュートリアルを参照して、dataとmethodsを取得できない場合があります.
ソリューション:
let that = this;
this.$erd.listenTo(document.getElementById("bar"), function (element) {
that.$nextTick(function () {
// echarts
that.myEcharts.resize();
})
})
//
参考記事
vueある容器の大きさの変化を監視する(円グラフは容器の大きさの変化に適応する)