Адаптивный метод макета для таблиц vue3 и диаграмм echarts

Пример:表格高度动态化

---

И высоту, и ширину экрана можно получить с помощью window.innerHeight / window.innerWidth атрибутов, а высота вычисляется после прокрутки экрана для событий, запускаемых объектом окна;

---

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)

Подведем итог:

По дороге на фронт | Я очень мало знаю, но хорошо учусь.
Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение для обсуждения.

— Следуй за мной: не заблудись на переднем крае —