feat: add SeamlessScroll component

src/views/components/cropping/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="margin: 10px">
     <div class="cropper-container">
-      <Cropper ref="refCropper" :width="'45vw'" :src="img" />
+      <Cropper ref="refCropper" :width="'40vw'" :src="img" />
       <img :src="cropperImg" class="croppered" v-if="cropperImg" />
     </div>
     <el-button type="primary" @click="onCropper">裁剪</el-button>

src/views/components/seamless-scroll/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-space wrap>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>无缝滚动示例</span>
+          <el-button class="button" type="text" @click="changeDirection('top')">向上滚动</el-button>
+          <el-button class="button" type="text" @click="changeDirection('bottom')">向下滚动</el-button>
+          <el-button class="button" type="text" @click="changeDirection('left')">向左滚动</el-button>
+          <el-button class="button" type="text" @click="changeDirection('right')">向右滚动</el-button>
+        </div>
+      </template>
+      <SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li v-for="(item, index) in listData" :key="index">
+            <span class="title" v-text="item.title"></span>
+            <span class="date" v-text="item.date"></span>
+          </li>
+        </ul>
+      </SeamlessScroll>
+    </el-card>
+  </el-space>
+</template>
+
+<script lang='ts'>
+import { ref, unref } from "vue";
+import { templateRef } from "@vueuse/core";
+
+import SeamlessScroll from "/@/components/SeamlessScroll";
+export default {
+  components: {
+    SeamlessScroll,
+  },
+  setup() {
+    const scroll = templateRef<HTMLElement | null>("scroll", null);
+
+    let listData = ref([
+      {
+        title: "无缝滚动第一行无缝滚动第一行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第二行无缝滚动第二行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第三行无缝滚动第三行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第四行无缝滚动第四行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第五行无缝滚动第五行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第六行无缝滚动第六行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第七行无缝滚动第七行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第八行无缝滚动第八行",
+        date: "2021-5-1",
+      },
+      {
+        title: "无缝滚动第九行无缝滚动第九行",
+        date: "2021-5-1",
+      },
+    ]);
+
+    let classOption = ref({
+      direction: "top",
+    });
+
+    function changeDirection(val) {
+      scroll.value.scrollInitMove();
+      classOption.value.direction = val;
+    }
+
+    return {
+      listData,
+      classOption,
+      changeDirection,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  margin: 10px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  span {
+    margin-right: 20px;
+  }
+}
+.warp {
+  height: 270px;
+  width: 360px;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    li,
+    a {
+      display: block;
+      height: 30px;
+      line-height: 30px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 15px;
+    }
+  }
+}
+</style>