ID1625-宽高变化时重新渲染

zhangchen

2025-07-24 25ee732f47fce720da216dce590a309225af8eb1

ID1625-宽高变化时重新渲染

 src/composables/useWindowSize.ts

New file
@@ -0,0 +1,21 @@
import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);

  const updateSize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };

  onMounted(() => {
    window.addEventListener('resize', updateSize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateSize);
  });

  return { width, height };
}

 src/views/mobile/bedsideAuxiliaryScreen/components/ScheduledTask.vue

 src/views/mobile/bedsideAuxiliaryScreen/index.vue

@@ -16,6 +16,7 @@
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import { EPageType } from '@/store/type/bedsideAuxiliaryScreen.type';
import { getAvailableHeightByClass } from '@/utils/utils';
import { useWindowSize } from '@/composables/useWindowSize';
// 未排班时的组件
const UnplannedSchedule = defineAsyncComponent(() => import('./pages/UnplannedSchedule.vue'));
// 未签到时的组件
@@ -27,6 +28,7 @@

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const cotentHeight = ref(0);
const { width, height } = useWindowSize();


const backgroundColor = computed(() => {
@@ -59,10 +61,10 @@
  return name;
});

watch(
  () => bedsideAuxiliaryScreenStore.deviceCode,
  (newVal: string) => {}
);
watch([width, height], () => {
  cotentHeight.value = getAvailableHeightByClass('content-position')
});


onMounted(() => {
  if (bedsideAuxiliaryScreenStore.deviceCode) {