vue3 表格、echarts图表响应式布局方法

示例: 表格高度动态化

---

屏幕高度和宽度都可通过 window.innerHeight / window.innerWidth 属性获取值，针对 window 对象触发的事件，跟随屏幕滚动计算出高度；

---

1、监听屏幕高度

1、监听事件，动态计算高度：

window.innerHeight // 获取高度

window.addEventListener(‘resize’, ()=> {
data.elmaxheight = window.innerHeight - 200;
})

2、取消监听事件：

removeEventListener

window.removeEventListener(‘resize’, ()=> {
// 处理相应方法
})

2、单页面挂载

---

echarts 中响应式处理图片改变屏幕时缩放的大小；

---

	//获取dom节点
	var myChart = echarts.init(document.getElementById('main'));
	//渲染dom
	myChart.setOption({
    
    ...})
	 // 响应式
	window.addEventListener('resize', ()=> {
    
    
		myChart.resize();
	})

3、全局封装挂载方法

---

在main.js中全局挂载，封装成共用方法；

---

1、main.js中处理封装

// echarts缩放方法--全局挂载
app.config.globalProperties.$echartsResize = (ref)=> {
    
    
  window.addEventListener('resize', ()=> {
    
    
    ref.resize()
  })
}

2、页面中使用

在组件实例中需要从vue中引入getCurrentInstance ，再通过 getCurrentInstance
获取proxy，进而可以获取全局挂载的实例进行使用。

	// vue3.2中使用
	const {
    
     proxy } = getCurrentInstance()
	proxy.$echartsResize(myChart)

总结:

前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。

— 关注我：前端路上不迷路 —