vue 감청 dom 크기 변경 사례

필요 설명:layot 왼쪽 메뉴 표시 줄 이 줄 어 들 고 오른쪽 콘 텐 츠 영역의 swiper 폭 이 바 뀌 지 않 았 습 니 다.

접 기 왼쪽 디 렉 터 리 를 누 르 면 작 아 지고 오른쪽 콘 텐 츠 영역 이 커 지 는 것 과 같 지만 swiper 는 처음에 폭 을 정 했 기 때문에 오른쪽 너비 크기 를 감청 해서 upddata 를 해 보 겠 다 고 생각 합 니 다.하지만 vue 의 watch 로$refs.swiper.offsetwidth 를 감청 하 는 데 실 패 했 습 니 다!!!하지만 폭 은 확실히 바 뀌 고 있 습 니 다.해결 방법 부터 말씀 드 리 겠 습 니 다.
1.사용element-resize-detector

var elementResizeDetectorMaker = require("element-resize-detector")
erd.listenTo(document.getElementById("swiper"), function(element) {
 var width = element.offsetWidth;
 var height = element.offsetHeight;
 console.log("Size: " + width + "x" + height);
});
//      vue getid。。     。 ref  dom   

2.사용ResizeObserver

  this.observer = new ResizeObserver(entries => {
   entries.forEach(() => {
    swiper.updata()
   })
  })
  let content = document.getElementById('swiper')
  this.observer.observe(content)

왜 워 치 는 내 폭 을 동시에 들 을 수 없 는 지 에 대해 서 는.양 방향 으로 연 결 된 데이터,즉 MVVM 의 데이터 만 감청 할 수 있 을 것 같 습 니 다.예 를 들 어 저 희 는 watch 로 data 와$route 를 자주 감청 합 니 다.아직 잘 모 르 겠 어 요.큰 놈 이 도 와 줬 으 면 좋 겠 어 요.
보충 지식:vue 는 어떤 용기 의 크기 변 화 를 감청 합 니 다(떡 모양 그림 은 용기 의 크기 변화 에 적응 합 니 다).
수요
echarts 도표 용기 크기 에 따라 크기 변경
주로 vue 감청 dom 요소 의 크기 변 화 를 사 용 했 습 니 다.
element 가 제공 하 는 element-resize-detector 는 문 제 를 쉽게 해결 할 수 있 는 존재 입 니 다.
설치 의존
npm install element-resize-detector
require 도입 사용,필요 한 페이지**.vue 도입

phontoImage(){   //         
       var echarts = require('echarts');
       var elementResizeDetectorMaker = require("element-resize-detector");//    dom     
       var erd = elementResizeDetectorMaker();
       var worldMapContainer = document.getElementById('main4'); //       dom  
        var that = this;
     //   chart        ,            
     var resizeWorldMapContainer = function () {
       worldMapContainer.style.width = worldMapContainer.scrollWidth+'px';
       worldMapContainer.style.height = worldMapContainer.clientHeight+'px';
     };

     //       dom，   echarts  
     var myChart = echarts.init(worldMapContainer);

        //var myChart = echarts.init(document.getElementById('main1'));
        myChart.on('click',function(params){

            that.open(params);

        });

        myChart.setOption({
          title:[
           {
             text: this.data4.name, //           
             //subtext:rentalVal,
             textStyle:{  //        
               fontSize:14,
               color:"black" 
             },
             subtextStyle: { //           
               fontSize:14,
               color: 'black'
             },
             textAlign:"center",
             x: '43%',   //         
             y: '44%',
           }],
           tooltip : {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
           },
           legend: {
             type: 'scroll',
             orient: 'vertical',
             right: 10,
             top: 20,
             bottom: 20,
             data: this.data4.names, 
           },
           series : [
             {
               name: this.data4.name,
               type: 'pie',
               radius : ['40%', '60%'], //              
               center: ['45%', '50%'],
               data:this.data4.values,
               itemStyle: {
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 },
                 normal:{
                   color:function(params) {
                   //     
                   var colorList =['#7c277d','#7460ee', '#FC3468', '#1e88e5', '#ffb22b', '#fc4b6c', '#708069', '#26c6da','#fcc525', '#8d6658'];
                     return colorList[params.dataIndex]
                    }
                 }
               }
             }
           ]
        });
        erd.listenTo(worldMapContainer, function (element) { //     
          that.$nextTick(function () {
            myChart.resize(); //        

   })
  })
      },

이상 의 vue 감청 dom 크기 변화 사례 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.