Vue3结合element-ui实现导航菜单展开收缩小功能

最新推荐文章于 2025-03-22 23:14:35 发布

is me 熊瞎子

最新推荐文章于 2025-03-22 23:14:35 发布

阅读量266

点赞数 4

文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_51600020/article/details/145575567

版权

1.导入方法（此处注册为全局，也可单独导入）

export function setupResizeObserver(type, div, func) {
  if (!div) return;
  let divElement = null;
  switch (type) {
    case "id":
      divElement = document.getElementById(div);
      break;
    case "className":
      divElement = document.querySelector("." + div);
      break;
    case "ref":
        divElement = div?.value || null; // 确保 div.value 是有效的元素
        break;
    default:
      divElement = null;
  }
  if (!divElement) return;

  // 创建 ResizeObserver 实例，监听div元素的大小变化时，执行函数
  const resizeObserver = new ResizeObserver(() => {
    func(divElement);
  });

  // 监听divElement元素的大小变化
  resizeObserver.observe(divElement);

  // 返回函数，用于在组件销毁前停止监听
  return () => {
    resizeObserver.disconnect();
  };
}

2.创建图表容器

  <div ref="chartRef" style="width: 100%;" :style="{ height: 100 + '%' }"></div>

3.获取标签绘制图表

const chartRef = ref();
let chart = null;

function init() {
  chart = echarts.init(chartRef.value);
  // 绘制图表
  chart.setOption(options.value);
}
function getChartHeight() {
  chart.resize();
}

4. 生命周期中使用

onMounted(() => { 
  init();
  // div自适应-----------------开始
  // 监听div元素的大小变化时，水平，垂直方向刻度大小重置
  // 调用函数设置div的自适应
  const cleanupDiv = setupResizeObserver("ref", chartRef, getChartHeight)
  //   observeDivSizeInRealTime
  // 在组件销毁前调用cleanupDiv，停止监听div的大小变化
  onUnmounted(() => {
    cleanupDiv();
  });
  // div自适应-----------------结束
});、