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 相关文章推荐
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
js获取form的方法
May 06 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python全局变量用法实例分析
2016/07/19 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
毕业生的自我评价
2013/12/30 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
简历里的自我评价范文
2014/02/24 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
银行催款通知书
2015/04/17 职场文书
通知的写法
2015/04/23 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
简爱电影观后感
2015/06/10 职场文书