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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP curl使用实例
2015/07/02 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
javascript验证身份证号
2015/03/03 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
秘书英文求职信
2014/04/16 职场文书
党员承诺书怎么写
2014/05/20 职场文书
社团活动总结书
2014/06/27 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
给领导敬酒词
2015/08/12 职场文书
2016年教代会开幕词
2016/03/04 职场文书
学生会自荐信
2019/05/16 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
python实现层次聚类的方法
2021/11/01 Python
Consul在linux环境的集群部署
2022/04/08 Servers