Responsive layout method for vue3 tables and echarts charts

Example:表格高度动态化

---

Both the height and width of the screen can be obtained through window.innerHeight / window.innerWidth attributes, and the height is calculated following the scrolling of the screen for events triggered by the window object;

---

1. Monitor screen height

1. Listen to events and dynamically calculate the height:

window.innerHeight // 获取高度

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

2. Cancel the listening event:

removeEventListener

window.removeEventListener('resize', ()=> { // handle the corresponding method })

2. Single page loading

---

echartsResponsive processing of pictures when changing the size of the screen;

---

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

3. Global package mount method

---

main.jsMount globally in , encapsulated into a shared method ;

---

1. main.jsIntermediate processing package

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

2. Use in the page

It needs to be vueintroduced getCurrentInstance, and then getCurrentInstance
obtained through proxy, and then the globally mounted instance can be obtained for use.

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

Summarize:

On the road to the front | I know very little, but I am good at learning.
If you have any questions, please leave a message to discuss.

— Follow me: Don’t get lost on the front end —