在swiper中使用slider滑块

当我们想要实现在可以左右滑动的页面中又要用到可以来回滑动的组件时，比如在swiper中使用elementUI中的slider时，可能你发现体验极差。因为滑动里面的盒子时，外面的swiper也跟着在动。
通过检查元素我们发现有这么一个属性：swiper-no-swiping，用来控制swiper是否可以滑动。这时我们可以根据鼠标是否悬浮来判断，若是，则阻断外部swiper滑动；否则恢复。

下面直接贴上代码供参考

<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>