style: update pageheader

components/_util/hooks/useDestroyed.ts

@@ -0,0 +1,12 @@
+import { onBeforeUnmount, ref } from 'vue';
+
+const useDestroyed = () => {
+  const mounted = ref(true);
+  onBeforeUnmount(() => {
+    mounted.value = false;
+  });
+
+  return mounted;
+};
+
+export default useDestroyed;

components/page-header/demo/responsive.vue

@@ -9,7 +9,7 @@ title:
 
 ## zh-CN
 
-在不同大小的屏幕下，应该有不同的表现
+在不同大小的屏幕下，应该有不同的表现。
 
 ## en-US
 

components/page-header/index.tsx

@@ -12,6 +12,7 @@ import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
+import useDestroyed from '../_util/hooks/useDestroyed';
 
 export const pageHeaderProps = {
   backIcon: PropTypes.any,
@@ -37,8 +38,11 @@ const PageHeader = defineComponent({
   setup(props, { emit, slots }) {
     const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);
     const compact = ref(false);
+    const isDestroyed = useDestroyed();
     const onResize = ({ width }: { width: number }) => {
-      compact.value = width < 768;
+      if (!isDestroyed.value) {
+        compact.value = width < 768;
+      }
     };
     const ghost = computed(() => props.ghost ?? pageHeader.value?.ghost ?? true);