fix(drawer): 修复不同位置打开抽屉，拖拽不生效的问题 (#469)

WeBankFinTech · Sep 25, 2023 · 59932d9 · 59932d9
1 parent 76a7af1
commit 59932d9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/components/drawer/drawer.tsx b/components/drawer/drawer.tsx
@@ -197,6 +197,9 @@ const Drawer = defineComponent({
                 : 'width';
         });
 
+        const placement = computed(() => props.placement);
+        const resizable = computed(() => props.resizable);
+
         const styles = computed(() => {
             const sty: CSSProperties = { width: '100%', height: '100%' };
             // 初始化的时候 数字直接拼px，如果是字符串直接应用，拖拽后数值覆盖
@@ -213,10 +216,10 @@ const Drawer = defineComponent({
             drawerRef,
             dragClass,
         } = useResizable({
-            propsKey: propsKey.value,
-            placement: props.placement,
+            propsKey,
+            placement,
             drawerSize,
-            resizable: props.resizable,
+            resizable,
             prefixCls,
         });
 

diff --git a/components/drawer/useResizable.ts b/components/drawer/useResizable.ts
@@ -1,14 +1,14 @@
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, ComputedRef } from 'vue';
 import { useEventListener } from '@vueuse/core';
 
 export const useResizable = (config: {
-    propsKey: 'width' | 'height';
-    placement: string;
+    propsKey: ComputedRef<'width' | 'height'>;
+    placement: ComputedRef<string>;
     drawerSize: {
         width: string | number;
         height: string | number;
     };
-    resizable: boolean;
+    resizable: ComputedRef<boolean>;
     prefixCls: string;
 }) => {
     const { propsKey, drawerSize, placement, resizable, prefixCls } = config;
@@ -39,13 +39,13 @@ export const useResizable = (config: {
     const onMousedown = (e: MouseEvent) => {
         if (drawerRef.value) {
             // 鼠标按下时的初始位置
-            start = propsKey === 'width' ? e.clientX : e.clientY;
+            start = propsKey.value === 'width' ? e.clientX : e.clientY;
 
             isActive.value = true;
 
             // 拖拽的时候拿到实时的宽度或者高度
             lastSizeValue =
-                propsKey === 'width'
+                propsKey.value === 'width'
                     ? drawerRef.value.offsetWidth
                     : drawerRef.value.offsetHeight;
         }
@@ -65,15 +65,16 @@ export const useResizable = (config: {
 
         // 偏移量
         const offset =
-            (propsKey === 'width' ? event.clientX : event.clientY) - start;
+            (propsKey.value === 'width' ? event.clientX : event.clientY) -
+            start;
 
         // 根据 位置 偏移量正负加减
-        if (['left', 'top'].includes(placement)) {
+        if (['left', 'top'].includes(placement.value)) {
             // 鼠标移动时改变宽度或者高度
-            drawerSize[propsKey] = lastSizeValue + offset;
+            drawerSize[propsKey.value] = lastSizeValue + offset;
         } else {
             // 鼠标移动时改变宽度或者高度
-            drawerSize[propsKey] = lastSizeValue - offset;
+            drawerSize[propsKey.value] = lastSizeValue - offset;
         }
     };
 
@@ -83,7 +84,7 @@ export const useResizable = (config: {
         if (isHover.value) {
             classArr.push(`${prefixCls}-drag-hover`);
         }
-        switch (placement) {
+        switch (placement.value) {
             case 'left':
                 classArr.push(`${prefixCls}-drag-left`);
                 break;
@@ -102,7 +103,7 @@ export const useResizable = (config: {
 
     // 可拖拽的时候才发起事件监听
     onMounted(() => {
-        if (resizable) {
+        if (resizable.value) {
             useEventListener(window.document, 'mousemove', doResize);
             useEventListener(window.document, 'mouseup', onMouseup);
         }

diff --git a/docs/.vitepress/components/drawer/resizable.vue b/docs/.vitepress/components/drawer/resizable.vue
@@ -1,10 +1,23 @@
 <template>
+    <FForm>
+        <FFormItem label="位置:">
+            <FRadioGroup v-model="placement">
+                <FRadio value="top">top</FRadio>
+                <FRadio value="bottom">bottom</FRadio>
+                <FRadio value="left">left</FRadio>
+                <FRadio value="right">right</FRadio>
+            </FRadioGroup>
+        </FFormItem>
+    </FForm>
+
+    <FDivider></FDivider>
+
     <FButton @click="open">打开抽屉</FButton>
     <FDrawer
         v-model:show="show"
         title="这里是标题"
         resizable
-        placement="right"
+        :placement="placement"
         width="600px"
         @ok="show = false"
     >
@@ -20,13 +33,15 @@ import { ref } from 'vue';
 export default {
     setup() {
         const show = ref(false);
+        const placement = ref('right');
 
         const open = () => {
             show.value = true;
         };
         return {
             show,
             open,
+            placement,
         };
     },
 };