Registro sobre la monitorización del tamaño de la ventana del navegador.

Proceso

Para utilizar gráficos de echarts en un proyecto de Vue, los gráficos basados en canvas de echarts no pueden cambiar de tamaño automáticamente con el cambio del tamaño de la ventana. En este caso, es necesario escuchar el cambio de tamaño de la ventana y ejecutar el método de redimensionamiento de echarts en tiempo real.

Agregar un controlador de eventos al objeto Window

mounted() { window.addEventListener('resize', this.resizeHandler) }, destroyed()
{ window.removeEventListener('resize', this.resizeHandler) }, methods:{
resizeHandler(){ // do something } }

Montar el método en el evento onresize de la ventana

watch: { screenWidth(val) { //
为了避免频繁触发resize函数导致页面卡顿，使用定时器 if (!this.timer) { //
一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenWidth = val this.timer = true const that = this setTimeout(function()
{ // 打印screenWidth变化的值 console.log(that.screenWidth) that.timer = false //
do something }, 400) } } }, mounted () { // 监听页面大小变化 const that = this
window.onresize = () => { return (() => { window.screenWidth =
document.body.clientWidth that.screenWidth = window.screenWidth })() } }

Este método es un poco engorroso y también se necesitan mantener dos variables adicionales en los datos.

Utilizar resize-observer-polyfill para escuchar los cambios de tamaño del DOM

Este método, en comparación con los dos anteriores, solo puede escuchar los cambios de tamaño de la ventana, pero puede escuchar los cambios de tamaño de los elementos. Puede responder a algunos elementos variables en la página. El método utilizado proviene del código fuente de element-ui. Agradezco al autor por descubrirlo: Método de evento de redimensionamiento encapsulado en element-ui

El código utilizado es el siguiente:

// 先引入
// 如果项目使用了element-ui，可以直接引用，或者copy一份放在自己的代码里
import {
  addResizeListener,
  removeResizeListener,
} from "element-ui/src/utils/resize-event";

export default {
  mounted() {
    // 可以在mounted这个钩子里初始化事件
    addResizeListener(this.$el, this.resizeListener);
  },
  methods: {
    resizeListener() {
      // do something
    },
  },
  // 生命周期结束时销毁事件
  destroyed() {
    if (this.resizeListener)
      removeResizeListener(this.$el, this.resizeListener);
  },
};

Utilizar useresizeobserver de vueuse (15 de diciembre de 2022)

Con el paso del tiempo, utilizar vueuse se ha vuelto muy conveniente. Cuando se necesitan llamar a algunos métodos nativos del navegador, vueuse suele ser una buena elección.
https://vueuse.org/core/useresizeobserver/#useresizeobserver

Resumen

Durante todo el proceso, he aprendido muchas cosas siguiendo el código fuente, pero no he estudiado de manera sistemática, solo tengo una comprensión general. Aquí hago un resumen:

1. ¿Polyfills o Ponyfills?
2. Sitio web oficial de echarts （El 28 de enero de 2021, echarts lanzará una nueva versión. He echado un vistazo y además del canvas, también se utiliza SVG para renderizar gráficos）
3. resize-observer-polyfill

Este post está traducido usando ChatGPT, por favor feedback si hay alguna omisión.