'vue-seamless-scroll'在项目的实践中如果添加el-tooltip那么有时不好使

最近写完一个项目,里面有一个滚动列表,他的描述文字很长,
所以当时使用了一下el-tooltip,
'vue-seamless-scroll'使用的无缝衔接滚动,
'vue-seamless-scroll'源码是把整个数据列表的element进行了一个copy,
所以el-tooltip理论是可以实现地但是那个copy有一点问题,所以我弃用了原作者的copy直接添加了一个插槽,
这也导致了需要修改依赖包可能会比较复杂,因为如果是合作开发那么你需要将你小伙伴的依赖插件都替换一下

以下的操作你需要将'vue-seamless-scroll'组件下载下来然后修改 myClass.vue中的文件 在进行打成dist包
并将dist包中的 vue-seamless-scroll.min.js 与你修改后的myClass.vue两个文件覆盖到你本地的项目中
node_modules/vue-seamless-scroll/ 这个路径是你本地项目的node_modules文件目录

<!-- 这是原作者的代码 -->
     <div
        ref="slotList"
        :style="float"
      >
        <slot></slot>
      </div>
      <div v-html="copyHtml" :style="float"></div>
    </div>

<!-- 我把原作者的代码改为了-->
      <div
        ref="slotList"
        :style="float"
      >
        <slot></slot>
        <div v-if="data.length > maxLength">
          <slot></slot>
        </div>
      </div>
    </div>

maxLength:列表最大展示条数
因为数据有可能会只有一两条,那么他不需要滚动同时也不需要复制 所以添加了一个条件

以下案例

      <vueSeamlessScroll
        :data="sales_return_data"
        class="seamless-warp"
        :class-option="classOption"
        :maxLength="2"
      >
        <div
          class="my_between six_scroll_bix_content_scroll"
          v-for="(item, index) in sales_return_data"
        >
        </div>
    </vueSeamlessScroll>

  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3 // 开始无缝滚动的数据量 this.dataList.length
      }
    }
  },

补充说明:
(页面上最多能显示几条 - 1 )= maxLength
(页面最多能显示几条就是 ) = limitMoveNum

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。