From 216d326158c11a763eff0ada2243b3ea3d93c1ba Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 26 Aug 2020 15:24:50 +0800
Subject: [PATCH] feat: add useRect

---
 src/api/use-rect.ts              |  7 +++++++
 src/calendar/components/Month.js | 11 +++++++++--
 src/nav-bar/index.js             |  5 ++++-
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/api/use-rect.ts

diff --git a/src/api/use-rect.ts b/src/api/use-rect.ts
new file mode 100644
index 000000000..f4e4d75cd
--- /dev/null
+++ b/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;
diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index 24d47f979..2ce0e88fa 100644
--- a/src/calendar/components/Month.js
+++ b/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;
     };
diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js
index ffe18e6e4..348413003 100644
--- a/src/nav-bar/index.js
+++ b/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);
       }
     });