教你如何在组件中使用vue-seamless-scroll无缝滚动组件

最近因为需求需要写一个公告组件，这就需要使用无缝滚动插件，在网上搜了一下，看到大家的一致好评就果断的使用了vue-seamless-scroll组件。下面就简单的介绍它的使用，具体详细的使用推荐大家去看下开发者文档。

安装：npm install vue-seamless-scroll --save

引入组件：import vueSeamlessScroll from 'vue-seamless-scroll'

配置：components: {
　　vueSeamlessScroll
},
computed: {
    // 公告滚动自定义
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },

ＨＴＭＬ：
　 <div @click="clickAnno">
          <vueSeamlessScroll :data="listData" :class-option="defaultOption" class="seamless-warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key='index'>
                <span class="title">{{$t('cs1111')}}：</span><span class="date">{{item}}</span>
              </li>
            </ul>
          </vueSeamlessScroll>
        </div>