import { onMounted, onUnmounted, ref } from 'vue';

export function screenLayout() {
  // 当前视口的宽度
  const width = ref(window.innerWidth);
  // 当前视口的高度
  const height = ref(window.innerHeight);

  const observer = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
      const { width: _width, height: _height } = entry.contentRect;
      width.value = _width;
      height.value = _height;
    });
  });

  //   当页面挂载的时候开始监听元素
  onMounted(() => observer.observe(document.body));
  //   当页面卸载的时候停止监听元素
  onUnmounted(() => observer.disconnect());
  return {
    width,
    height
  };
}
