vue2：使用 vue-seamless-scroll 插件；vue3：使用 vue3-seamless-scroll 插件
一、安装插件
//vue2
npm install vue-seamless-scroll --save//vue3
npm install vue3-seamless-scroll --save二、全局引入
//vue2import scroll from 'vue-seamless-scroll'Vue.use(scroll)//vue3 代码多去少补import { createApp } from 'vue';import App from './App.vue';import vue3SeamlessScroll from "vue3-seamless-scroll";const app = createApp(App);app.use(vue3SeamlessScroll);app.mount('#app');三、局部引入
//组件使用三步骤 1、引入 2、注册 3、使用
import vueSeamlessScroll from 'vue-seamless-scroll' //1、引入
components: { //2、注册vueSeamlessScroll
},
<vue-seamless-scroll></vue-seamless-scroll> //3、使用//vue3 同上 代码多去少补
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({components: {Vue3SeamlessScroll}})
<vue3-seamless-scroll></vue3-seamless-scroll>四、具体使用（vue2）
<template><el-card class="box-card"><div class="titleText">已报销金额排行</div><el-divider /><div id="plmMainFirst"><div class="ranking-title"><span class="title1">序号</span><span class="title2">部门</span><span class="title3">姓名</span><span class="title4">实际报销金额(￥/元)</span></div><div class="scroll"><vue-seamless-scroll :data="detail" :class-option="defineScroll"><divv-for="(item, index) in detail":key="index"class="item":style="{color:index == 0? '#f74b4d': index == 1? '#ff940e': index == 2? '#1cb142': '#535353',}":class="(index % 2 == 0 && !changecolor) ||(index % 2 !== 0 && changecolor)? 'bg_color': 'bg_color2'"><span class="item1">{{ index + 1 }}</span><span class="item2">{{ item.costBeLongDeptName }}</span><span class="item3">{{ item.applyPerson }}</span><span class="item4">{{ item.financialApprovalAmount }}</span></div></vue-seamless-scroll></div></div></el-card>
</template><script>
export default {data() {return {changecolor: false, //控制背景颜色};},props: {detail: {type: Array,required: true,},},computed: {defineScroll() {return {step: 0.2, // 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新dom// 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleHeight: 0,// 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3singleWidth: 0,waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},mounted() {},methods: {},
};
</script><style lang="scss" scoped>
.box-card {width: 100%;height: 68vh;margin-bottom: 20px;.titleText {font-size: 20px;font-weight: 800;margin: 10px 0 0 20px;display: inline-block;}.el-divider--horizontal {margin-bottom: 0;}#plmMainFirst {width: 100%;height: 52vh;.ranking-title {background: #1562bc;color: #fff;font-weight: 700;line-height: 44px;padding: 0 1.5vh;display: flex;.title1 {flex: 0.8;font-size: 15px;}.title2 {flex: 1.6;font-size: 15px;}.title3 {flex: 1.4;font-size: 15px;}.title4 {flex: 1.4;font-size: 15px;}}.scroll {height: 84%;overflow: hidden;.item {padding: 1vh 2vh;font-size: 15px;font-weight: 700;display: flex;.item1 {flex: 0.8;}.item2 {flex: 1.6;padding-right: 1vh;display: inline-block;vertical-align: top;width: 70%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;}.item3 {flex: 1.4;}.item4 {flex: 1.4;}}}}
}
.bg_color {background-color: #1563bc09 !important;
}.bg_color2 {background-color: #ffffff !important;
}
</style>
五、具体使用（vue3）
<template><div class="ranking-title"><span class="title1">序号</span><span class="title2">产线名称</span><span class="title3">年产能</span><span class="title4">月产能</span><span class="title5">周产能</span></div><div class="scroll"><vue3-seamless-scroll hover-stop="true" :list="listData" :hover="hoverVal" :step="stepVal" :limitScrollNum="4"><div v-for="(item, index) in listData" :key="index" class="item"><span class="item1">{{ index + 1 }}</span><span class="item2">{{ item.PL_NAME }}</span><span class="item3">{{ item.YQTY }}</span><span class="item3">{{ item.MQTY }}</span><span class="item4">{{ item.WQTY }}</span></div></vue3-seamless-scroll></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'const url = ref('http://192.129.12.11:8080/')
const hoverVal = ref<boolean>(true)
const stepVal = ref(0.3)
const listData = ref()const getProductLineData = () => {axios.get(url.value + 'mes/orders/capacitys').then(res => {listData.value = res.data.data})
}
onMounted(() => {getProductLineData()setInterval(getProductLineData, 300000)
})
</script><style lang="less" scoped>
.ranking-title {background: #1562bc;color: #fff;line-height: 35px;padding: 0 1.5vh;margin: 0 0 0 2vh;display: flex;.title1 {flex: 1;font-size: 14px;}.title2 {flex: 2.5;font-size: 14px;}.title3 {flex: 1.2;font-size: 14px;}.title4 {flex: 1.2;font-size: 14px;}.title5 {flex: 1;font-size: 14px;}
}
.scroll {margin: 0 0 0 2vh;height: 18vh;overflow: hidden;background-color: rgba(21, 98, 188, 0.2);.item {padding: 0.8vh 2vh;font-size: 14px;border-bottom: 1px solid #1562bc;display: flex;.item1 {flex: 0.7;color: #f4f4f4;}.item2 {flex: 2.6;padding-right: 1vh;display: inline-block;vertical-align: top;width: 70%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;color: #f4f4f4;}.item3 {flex: 1.2;display: inline-block;vertical-align: top;width: 70%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;color: #f4f4f4;}.item4 {flex: 0.8;color: #f4f4f4;}}
}
</style>