演示图
注:以下代码来自于GPT4o:国内官方直连GPT4o
代码
javascript
<template>
<div>
<div class="alarmList-child" ref="alarmList" @mouseenter.stop="autoRoll(1)" @mouseleave.stop="autoRoll()">
<div class="alarm-item" v-for="(item,index) in alarmList" :key="index">
<div class="alarm-item-top">
<div>{{ item.name }}</div>
</div>
<div class="alarm-item-bot">
<div>{{ item.time }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
alarmList: [
{
name: '报警1',
time: '2021-09-01 12:00:00',
content: '报警内容1'
},
{
name: '报警2',
time: '2021-09-01 12:00:00',
content: '报警内容2'
},
{
name: '报警3',
time: '2021-09-01 12:00:00',
content: '报警内容3'
},
{
name: '报警44',
time: '2021-09-01 12:00:00',
content: '报警内容4'
},
{
name: '报警5',
time: '2021-09-01 12:00:00',
content: '报警内容5'
},
{
name: '报警6',
time: '2021-09-01 12:00:00',
content: '报警内容6'
},
{
name: '报警7',
time: '2021-09-01 12:00:00',
content: '报警内容7'
},
{
name: '报警8',
time: '2021-09-01 12:00:00',
content: '报警内容8'
},
{
name: '报警9',
time: '2021-09-01 12:00:00',
content: '报警内容9'
},
{
name: '报警10',
time: '2021-09-01 12:00:00',
content: '报警内容10'
},
{
name: '报警11',
time: '2021-09-01 12:00:00',
content: '报警内容11'
},
{
name: '报警12',
time: '2021-09-01 12:00:00',
content: '报警内容12'
}],
timer: null,
timerfir: null,
scrollY: 20,//滚动距离
speed: 0.5,//滚动速度
}
},
mounted () {
this.autoRoll()
},
destroyed () {
clearInterval(this.timer)
clearTimeout(this.timerfir)
},
methods: {
autoRoll (flag) {
if(flag) {
clearInterval(this.timer)
clearTimeout(this.timerfir)
return;
}
let table = document.querySelector('.alarmList-child')
this.timerfir = window.setTimeout(() => {
clearInterval(this.timer)
this.timer = setInterval(() => {
//scrollHeight 获取元素内容高度(只读)
//scrollTop 获取或设置元素的垂直滚动条位置
//offsetHeight 获取元素的高度(只读)
this.scrollY += this.speed
if(this.scrollY >= table.scrollHeight - table.offsetHeight) {
this.scrollY = 0
}
table.scrollTop = this.scrollY
}, 20)
}, 1000)
}
}
}
</script>
<style lang="less">
.alarmList-child {
margin-top: 200px;
width: 800px;
height: 200px;
overflow: hidden;
position: relative;
.alarm-item {
width: 100%;
height: 40px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
.alarm-item-top {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.alarm-item-bot {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>