當(dāng)我們想要實(shí)現(xiàn)在可以左右滑動(dòng)的頁(yè)面中又要用到可以來(lái)回滑動(dòng)的組件時(shí),比如在swiper中使用elementUI中的slider時(shí)云挟,可能你發(fā)現(xiàn)體驗(yàn)極差哪轿。因?yàn)榛瑒?dòng)里面的盒子時(shí)宣脉,外面的swiper也跟著在動(dòng)猿妈。
通過(guò)檢查元素我們發(fā)現(xiàn)有這么一個(gè)屬性:swiper-no-swiping,用來(lái)控制swiper是否可以滑動(dòng)。這時(shí)我們可以根據(jù)鼠標(biāo)是否懸浮來(lái)判斷搔啊,若是,則阻斷外部swiper滑動(dòng)旧蛾;否則恢復(fù)迟赃。
下面直接貼上代碼供參考
<div :class="{'swiper-wrapper':true,'swiper-no-swiping':isPrevent}">
<div class="swiper-slide">
<div class="block slider1" @mouseover="isPrevent=true" @mouseout="isPrevent=false">
...
<el-slider ref="tips1" :max="10" v-model="value1" :show-tooltip="false" :format-tooltip="format_content1"></el-slider>
</div>
</div>
</div>