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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
微信小程序中weui用法解析
Oct 21 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
自己前几天写的无限分类类
2007/02/14 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
个人求职简历的自我评价
2013/10/19 职场文书
探亲邀请信范文
2014/01/30 职场文书
文艺晚会主持词
2014/03/24 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
厨房管理计划书
2014/04/27 职场文书
2014年统计工作总结
2014/11/21 职场文书
北京导游词
2015/02/12 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android