feat: add useRect

src/api/use-rect.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'vue';
+
+export const useRect = (el: Ref<Element>) => el.value.getBoundingClientRect();
+
+export const useWidth = (el: Ref<Element>) => useRect(el).width;
+
+export const useHeight = (el: Ref<Element>) => useRect(el).height;

src/calendar/components/Month.js

@@ -1,7 +1,10 @@
 import { ref, computed, getCurrentInstance } from 'vue';
+
+// Utils
 import { createNamespace, addUnit } from '../../utils';
 import { unitToPx } from '../../utils/format/unit';
 import { setScrollTop } from '../../utils/dom/scroll';
+import { getMonthEndDay } from '../../datetime-picker/utils';
 import {
   t,
   bem,
@@ -11,8 +14,12 @@ import {
   getNextDay,
   formatMonthTitle,
 } from '../utils';
+
+// Compositions
+import { useHeight } from '../../api/use-rect';
 import { useToggle } from '../../api/use-toggle';
-import { getMonthEndDay } from '../../datetime-picker/utils';
+
+// Components
 import Day from './Day';
 
 const [createComponent] = createNamespace('calendar-month');
@@ -78,7 +85,7 @@ export default createComponent({
     let height;
     const getHeight = () => {
       if (!height) {
-        ({ height } = monthRef.value.getBoundingClientRect());
+        height = useHeight(monthRef);
       }
       return height;
     };

src/nav-bar/index.js

@@ -4,6 +4,9 @@ import { ref, onMounted } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
+// Compositions
+import { useHeight } from '../api/use-rect';
+
 // Components
 import Icon from '../icon';
 
@@ -32,7 +35,7 @@ export default createComponent({
 
     onMounted(() => {
       if (props.placeholder && props.fixed) {
-        height.value = navBarRef.value.getBoundingClientRect().height;
+        height.value = useHeight(navBarRef);
       }
     });