父组件data
<script setup>
import { getCurrentInstance, onMounted } from "vue";
onMounted(() => {
let data = [
{
"id": 25,
"content": "设备离线",
"is_recovery": 1,
"trigger_time": "2024.04.19 16:48",
"recovery_name": "已恢复"
},
{
"id": 24,
"content": "设备离线",
"is_recovery": 1,
"trigger_time": "2024.04.19 16:48",
"recovery_name": "已恢复"
}
]
const { proxy } = getCurrentInstance();
proxy.$refs["dsRealWarn"].initData(data);
});
</script>
子组件 vue3-seamless-scroll 常用说明如下:
limitScrollNum 多少条才开始滚动
hover-stop="true" 鼠标悬浮暂停滚动
step 滚动的速度
滚动的列表所在容器必须设置样式 overflow: hidden;
npm install vue3-seamless-scroll --save
<template>
<div class="warningInfo">
<HomeTitle title="报警信息"></HomeTitle>
<div class="content" v-if="items?.length > 0">
<vue3-seamless-scroll hover-stop="true" hover="true" step="0.2" limitScrollNum="4" :list="items" class="scroll"
v-if="items?.length > 0">
<div class="item" v-for="item in items" :key="item.id">
<div>
<div class="top">
<span :class="[
item.is_recovery === 0 ? 'warningBg' : 'normalBg',
'WaterMonitor',
]">{{ item.recovery_name }}</span>
<span class="time">{{ item.trigger_time }}</span>
</div>
<div :class="[
item.is_recovery === 0 ? 'warningRemark' : 'normalRemark',
'remark',
]">{{ item.content }}</div>
</div>
</div>
</vue3-seamless-scroll>
</div>
<HomeNoData class="scroll" :isBlackText="true" v-else />
</div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import HomeTitle from "./DsHomeTitle.vue";
import HomeNoData from "@/components/homeNoData/index.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const items = ref([]);
const initData = (data) => {
items.value = data;
};
defineExpose({ initData });
</script>
<style lang="scss" scoped>
.warningInfo {
width: 100%;
height: calc((100vh - 160px) / 3 - 10px);
background: #f0f9ff;
border: 1px solid #fff;
border-radius: 6px;
margin-top: 10px;
.content {
width: 100%;
height: calc((100vh - 160px) / 3 - 10px - 60px);
overflow-y: auto;
.item {
width: 100%;
// padding-left: 24px;
padding: 0 12px;
margin-top: 16px;
.top {
width: 100%;
height: 21px;
}
.WaterMonitor {
border-radius: 4px;
font-size: 12px;
margin-right: 6px;
color: #fff;
padding: 1px 4px;
}
.warningBg {
background: linear-gradient(180.00deg, #b23535 0%, #d33232 100%);
}
.normalBg {
background: linear-gradient(180.00deg, #00af75 0%, #008d5e 100%);
}
.time {
font-size: 13px;
color: #295574;
}
.remark {
width: 100%;
height: 25px;
line-height: 25px;
margin-top: 10px;
font-weight: 500;
font-size: 15px;
text-align: left;
color: #003558;
padding: 0 8px;
}
.warningRemark {
background: linear-gradient(260.36deg, #f0f9ff 0%, #ebd0d0 100%);
}
.normalRemark {
background: linear-gradient(260.36deg, #f0f9ff 0%, #c9ecffe6 100%)
}
}
}
}
.scroll {
width: 100%;
height: calc((100vh - 160px) / 3 - 10px - 60px);
box-sizing: border-box;
overflow: hidden;
}
</style>