當(dāng)我們想要實(shí)現(xiàn)在可以左右滑動(dòng)的頁面中又要用到可以來回滑動(dòng)的組件時(shí)，比如在swiper中使用elementUI中的slider時(shí)，可能你發(fā)現(xiàn)體驗(yàn)極差。因?yàn)榛瑒?dòng)里面的盒子時(shí)，外面的swiper也跟著在動(dòng)。
通過檢查元素我們發(fā)現(xiàn)有這么一個(gè)屬性：swiper-no-swiping，用來控制swiper是否可以滑動(dòng)。這時(shí)我們可以根據(jù)鼠標(biāo)是否懸浮來判斷，若是，則阻斷外部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>