2021.10.26

이짜젠·2021년 10월 26일
0

[Vue] Slot에는 v-show 불가

<slot :v-show="valuable" />

slot에는 v-show 사용이 불가능하다.
v-show는 해당 DOM을 그려놓고 display를 none으로 처리해준다.

내용이 동적으로 변하는 slot에 대해서는 어떤 element를 display: none 처리해야할지 알 수 없기때문에 사용이 불가능하다. v-if로 대체해야 한다.

[vue-portal] 스크롤 이슈

스크롤이슈가 발생하면 일단 전달받은 마크업구조와 실제 개발구조 동일한지 파악해야한다.
이번 이슈의 경우 vue-portal을 사용하면서 기존 팝업에 vue-portal엘리먼트 depth가 추가가 되면서 깨지는 이슈였다.

vue-portal에 기존 element의 셀렉터 및 에트리뷰트를 부여함으로써 해결했다.

<!-- AS IS-->
<portal-target
    @change="handlePopupChange"
    name="popup-layer"
>
  <div
       id="popup"
       class="dim_pop full_popup total_prod_list_layer"
       :class="(opened) ? 'active' : ''"
  >
    <!-- popup contents -->
  </div>
</portal-target>


<!-- TO BE -->
<portal-target
    id="popup"
    name="popup-layer"
    class="dim_pop full_popup total_prod_list_layer"
    :class="(opened) ? 'active' : ''"
    @change="handlePopupChange"
>
  <!-- popup contents -->
</portal-target>

[IOS] 스크롤 이슈

IOS의 경우 외부영역을 스크롤한 뒤 실제 스크롤되는 영역을 스크롤하면 스크롤이 먹통이 되는 현상이있다.
다양한 해결방법이 있지만 꼼수로 사용될 수 있는건, Swiper의 자동으로 생성되는 Swiper Container를 이용하면 해당 문제가 해결된다.
(Swiper Container 스타일에는 해당 이슈를 해결하는 스타일링이 되어있는 듯 하다.)

물론 단점이 많다.

  • Swiper 의 기능을 사용하지 않는데도 Swiper패키지를 설치해야하는 낭비가있다.
  • Swiper가 생성하는 DOM 구조에 맞춰서 스타일을 적용해야한다.

Vue Template

<component :is="swiperOrDiv" :options="swiperOption" class="custom_class">
  <ul>
    <li>item A</li>
    <li>item B</li>
    <li>item C</li>
    <li>item D</li>
  </ul>
</component>

Vue Script

export default {
  name: 'ScrollComp',
  data: {
    swiperOrDiv: info.OS.vendor === 'IOS' ? Swiper : 'div',
    swiperOption: {
      direction: 'vertical',
      slidesPerView: 'auto',
      freeMode: true,
      scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
      mousewheel: true,
    },
  }
}
profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.

0개의 댓글