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 相关文章推荐
自己动手手写jQuery插件总结
Jan 20 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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
人族 TERRAN 概述
2020/03/14 星际争霸
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
小程序实现多列选择器
2019/02/15 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
python中map()与zip()操作方法
2016/02/27 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python中安装django模块的方法
2020/03/12 Python
Python如何实现FTP功能
2020/05/28 Python
Python设计密码强度校验程序
2020/07/30 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
大一自我鉴定范文
2013/12/27 职场文书
公司道歉信范文
2014/01/09 职场文书
工作过失检讨书
2014/02/23 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL