vue监听dom大小改变案例

这篇文章主要介绍了vue监听dom大小改变案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下)

vue监听dom大小改变案例 (https://www.wp-admin.cn/) javascript教程 第1张

类似于点击折叠左边目录会变小,右边内容区域会变大,但是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大小改变案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

vue监听dom大小改变案例 (https://www.wp-admin.cn/) javascript教程 第2张

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-04-23 17:51:07
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
[email protected]
取消

选择聊天工具: