vue监听dom大小改变案例


Posted in Javascript onJuly 29, 2020

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

vue监听dom大小改变案例

类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下。但是我用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)

至于为什么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大小改变案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
详解JavaScript作用域 闭包
Jul 29 #Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
Vue 监听元素前后变化值实例
Jul 29 #Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
You might like
劣质的PHP代码简化
2010/02/08 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
express 项目分层实践详解
2018/12/10 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue 组件简介
2020/07/31 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python中有趣在__call__函数
2015/06/21 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python命令 -u参数用法解析
2019/10/24 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python excel和yaml文件的读取封装
2021/01/12 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
英语老师推荐信
2014/02/26 职场文书
医药营销个人求职信
2014/04/12 职场文书
核心价值观演讲稿
2014/05/13 职场文书
企业员工辞职信范文
2015/05/12 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python