<slot :v-show="valuable" />
slot
에는 v-show
사용이 불가능하다.
v-show는 해당 DOM을 그려놓고 display를 none으로 처리해준다.
내용이 동적으로 변하는 slot에 대해서는 어떤 element를 display: none 처리해야할지 알 수 없기때문에 사용이 불가능하다. v-if로 대체해야 한다.
스크롤이슈가 발생하면 일단 전달받은 마크업구조와 실제 개발구조 동일한지 파악해야한다.
이번 이슈의 경우 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의 경우 외부영역을 스크롤한 뒤 실제 스크롤되는 영역을 스크롤하면 스크롤이 먹통이 되는 현상이있다.
다양한 해결방법이 있지만 꼼수로 사용될 수 있는건, Swiper의 자동으로 생성되는 Swiper Container를 이용하면 해당 문제가 해결된다.
(Swiper Container 스타일에는 해당 이슈를 해결하는 스타일링이 되어있는 듯 하다.)
물론 단점이 많다.
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,
},
}
}