vue2：使用 vue-seamless-scroll 插件；vue3：使用 vue3-seamless-scroll 插件
一、安装插件
//vue2
npm install vue-seamless-scroll --save
//vue3
npm install vue3-seamless-scroll --save二、全局引入
//vue2
import 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">
<div
v-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.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
// 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleHeight: 0,
// 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
singleWidth: 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>
