vue3 无缝滚动 seamless-scroll

vue3中无法使用 vue-seamless-scroll，作者还没有发布vue3版本的
github issues中有提到一个解决方法，是某个作者推荐的封装方法，但是我更倾向于使用js版的seamless-scroll作为临时替代方案。

npm install seamscroll --save

SeamlessScroll.vue: 可以直接拷贝

<template>
  <div class="scroll-wrap">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import { init } from 'seamscroll/src';

console.log('8888', init);

export default defineComponent({
  name: 'seamlessScroll',
  components: {},
  props: {
    id: {
      type: String,
      default: '',
    },
    classOption: {
      type: Object,
      default: {
        step: 1, //速度
        hoverStop: true, //鼠标停止
        direction: 1, //0 下 1 上 2 左 3 右
      },
    },
  },
  setup(props) {
    const data = reactive({});
    const methods = {
      checkChange(val: number) {},
    };
    onMounted(() => {
      setTimeout(() => {
        console.log(props.id);
        const config = Object.assign(
          {},
          {
            dom: document.getElementById(props.id),
          },
          props.classOption,
        );
        init(config);
      }, 100);
    });
    return {
      data,
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>

使用：

<SeamlessScroll
      class="scroll-content"
      :class="{ scrollHeight: !needTitle }"
      :class-option="classOption"
      :id="data.id"
    >
  <ul class="dl-scroll" :id="data.id">
    <li>自己写</li>
  </ul>
</SeamlessScroll>

注意：如果多个滚动 data.id 需要保证唯一性，可以用Math.random()等方式去生成