首页 >> js开发 >> jsvue监听dom大小改变案例js大全
jsvue监听dom大小改变案例js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下)需求描述:类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把1、使用element-resize-detectorelement-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也可以
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 、使用ResizeObserverResizeObserver
this.observer = new ResizeObserver(entries => {
entries.forEach(() => {
swiper.updata()
})
})
let content = document.getElementById('swiper')
this.observer.observe(content)
this.observer = new ResizeObserver(entries => {
entries.forEach(() => {
swiper.updata()
})
})
let content = document.getElementById('swiper')
this.observer.observe(content)至于为什么watch不能兼听我的宽度的问题。。我感觉是只能监听被双向绑定的数据,也就是MVVM的数据,比如我们经常用watch监听data和$route。但还是不太确定希望有大佬帮我~~~补充知识:vue 监听某个容器大小变化(饼状图适应容器大小变化)补充知识:补充知识:vue 监听某个容器大小变化(饼状图适应容器大小变化)需求需求echarts图表 根据容器大小改变大小主要应用了vue 监听 dom元素 尺寸的变化element提供的 element-resize-detector 可以轻松解决问题的存在安装依赖
npm install element-resize-detector
npm install element-resize-detectorrequire 引入使用,需要用到的页面 ***.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}
{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(); //变化重新渲染饼图
})
})
},
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}
{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大小改变案例就是小编分享给大家的全部内容了,希望能给大家一个参考。
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也可以
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 、使用ResizeObserverResizeObserver
this.observer = new ResizeObserver(entries => {
entries.forEach(() => {
swiper.updata()
})
})
let content = document.getElementById('swiper')
this.observer.observe(content)
this.observer = new ResizeObserver(entries => {
entries.forEach(() => {
swiper.updata()
})
})
let content = document.getElementById('swiper')
this.observer.observe(content)至于为什么watch不能兼听我的宽度的问题。。我感觉是只能监听被双向绑定的数据,也就是MVVM的数据,比如我们经常用watch监听data和$route。但还是不太确定希望有大佬帮我~~~补充知识:vue 监听某个容器大小变化(饼状图适应容器大小变化)补充知识:补充知识:vue 监听某个容器大小变化(饼状图适应容器大小变化)需求需求echarts图表 根据容器大小改变大小主要应用了vue 监听 dom元素 尺寸的变化element提供的 element-resize-detector 可以轻松解决问题的存在安装依赖
npm install element-resize-detector
npm install element-resize-detectorrequire 引入使用,需要用到的页面 ***.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}
{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(); //变化重新渲染饼图
})
})
},
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}
{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大小改变案例就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- js代码浅谈JavaScript中等号、双等号、 三等号的区别
- jsvue 解决addRoutes多次添加路由重复的操作js大全
- jsvue相同路由跳转强制刷新该路由组件操作js大全
- jsantd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作js大全
- jsvue实现在进行增删改操作后刷新页面js大全
- js解决vue-router路由拦截造成死循环问题js大全
- js代码详解vue路由,js详解vue路由
- js代码javascript实现时间日期的格式化的方法汇总
- js解决vue路由name同名,路由重复的问题js大全
- jsvue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作js大全