欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue监听dom大小改变案例

程序员文章站 2022-10-31 14:27:01
需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下)类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时...

需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下)

vue监听dom大小改变案例

类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把

1、使用

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)

至于为什么watch不能兼听我的宽度的问题。。我感觉是只能监听被双向绑定的数据,也就是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大小改变案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。