vue监听dom大小改变案例
程序员文章站
2022-10-31 14:27:01
需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下)类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时...
需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下)
类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把
1、使用
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大小改变案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 一段采集程序代码