vue轮播插件vue-concise-slider,支持手机和pc

822 阅读1分钟

前段时间写轮播发现了一个较好的轮播插件,支持手机和pc,但是不支持鼠标悬停操作,这里自己动手添加一下

<div class="sliderbox" @mouseenter="stopSlider" @mouseleave="startSlider">
    <slider ref="slider" :options="slideroptions" @slide='slide' @tap='onTap' @init='onInit'>
      <!-- 直接使用slideritem slot -->
      <slideritem>
        <img src="./assets/swiper1.png">
      </slideritem>
      <slideritem>
        <img src="./assets/swiper2.png">
      </slideritem>
      <!-- 设置loading,可自定义 -->
      <!-- <div slot="loading">loading...</div> -->
    </slider>
  </div>
  
  slideroptions: any = {
    currentPage: 0,
    autoplay: 3000,
    loop: true,
    direction: 'horizontal',
    timingFunction: 'ease',
    // loopedSlides:1,
    // slidesToScroll:1,
    // thresholdDistance:500,
    // thresholdTime:3000,
    // speed: 300
  }
  
  // 事件
  stopSlider() {
    const that: any = this
    that.$refs.slider.$emit('autoplayStop')
  }
  startSlider() {
    const that: any = this
    that.$refs.slider.$emit('autoplayStart', 3000)
  }
  
  

文档地址:warpcgd.github.io/vue-concise…