[#778][3.0] Window 컴포넌트 모달 스펙 변경

################ - Window 컴포넌트에 modal, modeless 선택 옵션 추가 - hideScroll 기능을 추가 (body에 스크롤 유지/숨김 모듈 기능) - hideScroll: false가 기본 값이고 body에 scroll 시 이벤트를 prevent하여 스크롤 시 모달 내 스크롤링만 가능하도록 함
ex-em · Mar 15, 2021 · 9decec3 · 9decec3
1 parent f47eeb9
commit 9decec3
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 54 deletions.
diff --git a/docs/views/window/api/window.md b/docs/views/window/api/window.md
@@ -32,5 +32,5 @@
 | icon-class | String | '' | <윈도우> 내부 헤더의 아이콘 | |
 | width | String | '' | <윈도우> 너비 | 
 | height | String | '' | <윈도우> 높이 | 
-| show-modal-layer | Boolean | true | 모달창 하단의 dim layer 출력 여부 | true, false |
+| is-modal | Boolean | true | 모달창 여부. 즉, dim layer 출력 여부(modal vs. modeless) | true, false |
 | close-on-click-modal | Boolean | false | 모달 레이어 클릭 시 메시지 창 닫기 여부 | true, false |
diff --git a/docs/views/window/example/Default.vue b/docs/views/window/example/Default.vue
@@ -76,11 +76,11 @@
     </div>
   </div>
   <div class="case">
-    <p class="case-title">Hide Modal Layer</p>
+    <p class="case-title">Hide Dim Layer (Modeless)</p>
     <ev-window
       v-model:visible="isVisible4"
       :title="'COMMON TITLE'"
-      :show-modal-layer="false"
+      :is-modal="false"
     >
       <div>COMMON CONTENTS</div>
     </ev-window>
@@ -93,6 +93,24 @@
       </button>
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Hide Scroll</p>
+    <ev-window
+      v-model:visible="isVisible5"
+      :title="'COMMON TITLE'"
+      :hide-scroll="true"
+    >
+      <div>HIDE BODY SCROLL WITH CONTENTS</div>
+    </ev-window>
+    <div class="description">
+      <button
+        class="btn"
+        @click="clickButton5"
+      >
+        click to open window!
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -120,6 +138,11 @@ export default {
       isVisible4.value = true;
     };
 
+    const isVisible5 = ref(false);
+    const clickButton5 = () => {
+      isVisible5.value = true;
+    };
+
     return {
       isVisible1,
       clickButton1,
@@ -129,6 +152,8 @@ export default {
       clickButton3,
       isVisible4,
       clickButton4,
+      isVisible5,
+      clickButton5,
     };
   },
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/window/Window.vue b/src/components/window/Window.vue
@@ -6,15 +6,13 @@
     >
       <div
         v-if="visible"
-        :class="[
-          'ev-window-wrapper',
-           { 'show-modal': showModalLayer },
-        ]"
+        class="ev-window-wrapper"
       >
         <div
-          v-if="showModalLayer"
+          v-if="isModal"
           class="ev-window-dim-layer"
           @click="closeWin('layer')"
+          @wheel.stop.prevent="() => {}"
         />
         <div
           :class="['ev-window', windowClass]"
@@ -42,7 +40,11 @@
               </p>
             </template>
           </div>
-          <div class="ev-window-content">
+          <div
+            ref="windowContent"
+            class="ev-window-content"
+            @wheel="onWheelContent"
+          >
             <slot />
           </div>
           <div
@@ -64,7 +66,7 @@
 </template>
 
 <script>
-import { computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 
 export default {
   name: 'EvWindow',
@@ -97,14 +99,18 @@ export default {
       type: Boolean,
       default: false,
     },
-    showModalLayer: {
+    isModal: {
       type: Boolean,
       default: true,
     },
     closeOnClickModal: {
       type: Boolean,
       default: false,
     },
+    hideScroll: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:visible': [Boolean],
@@ -124,6 +130,8 @@ export default {
     };
     initWrapperDiv();
 
+    const windowContent = ref(null);
+
     const windowStyle = computed(() => {
       if (props.fullscreen) {
         return {
@@ -158,26 +166,49 @@ export default {
       emit('update:visible', false);
     };
 
-    const setScrollLock = (isLock) => {
-      if (isLock) {
-        if (props.showModalLayer) {
+    const changeBodyCls = (isVisibleModal) => {
+      if (isVisibleModal) {
+        if (props.hideScroll) {
           document.body.classList.add('ev-window-scroll-lock');
         }
       } else {
-        const windowCount = root?.getElementsByClassName('show-modal')?.length;
+        console.log(12321);
+        const windowCount = root?.getElementsByClassName('ev-window-wrapper')?.length;
         if (windowCount === 1) {
           document.body.classList.remove('ev-window-scroll-lock');
         }
       }
     };
 
-    watch(() => props.visible, (newVal) => {
-      setScrollLock(newVal);
-    });
+    const onWheelContent = (e) => {
+      const hasScroll = windowContent.value.scrollHeight > windowContent.value.clientHeight;
+      if (!hasScroll) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      const isMeetTop = windowContent.value.scrollTop === 0;
+      const isMeetBottom = (windowContent.value.scrollHeight - windowContent.value.clientHeight)
+        === windowContent.value.scrollTop;
+      const isUpward = e.deltaY < 0;
+      const isDownward = e.deltaY > 0;
+
+      if ((isMeetBottom && isDownward) || (isMeetTop && isUpward)) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    watch(
+      () => props.visible,
+      newVal => changeBodyCls(newVal),
+    );
 
     return {
+      windowContent,
       windowStyle,
       closeWin,
+      onWheelContent,
     };
   },
 };
@@ -188,6 +219,7 @@ export default {
 
 .ev-window-scroll-lock {
   overflow: hidden !important;
+  //padding-right: 15px;
 }
 .ev-window-dim-layer {
   position: fixed;