@vue3-simple-bui/screen

基于 Vue3 的大屏业务组件库，专注于解决大屏开发中的高频场景。

特性

• 🖥️ 大屏适配 - 一键解决多分辨率适配，支持等比缩放与全屏铺满
• 📊 数据展示 - 数字动画组件，让数据呈现更生动
• 📜 无缝滚动 - 列表数据轮播，支持多方向滚动
• 📘 类型友好 - 完整 TypeScript 支持
• 🧩 业务沉淀 - 封装大屏高频业务场景

安装

pnpm install @vue3-simple-bui/screen

使用

按需引入

import { LScaleScreen, LCountTo, LSeamlessScroll } from '@vue3-simple-bui/screen';

全局注册

import Screen from '@vue3-simple-bui/screen';

app.use(Screen);

组件列表

LScaleScreen - 大屏缩放组件

| 属性 | 说明 | 类型 | 默认值 | | ---------- | -------------------- | ------------------- | ------- | | width | 设计稿宽度 | number \| string | 1920 | | height | 设计稿高度 | number \| string | 1080 | | autoScale | 宽高自适应 | boolean \| object | true | | fullScreen | 全屏铺满模式 | boolean | false | | delay | 窗口变化防抖延迟(ms) | number | 500 |

LCountTo - 数字滚动组件

| 属性 | 说明 | 类型 | 默认值 | | --------- | ------------ | -------- | ------ | | startVal | 起始值 | number | 0 | | endVal | 结束值 | number | 2017 | | duration | 动画时长(ms) | number | 3000 | | decimals | 小数位数 | number | 0 | | separator | 千分位分隔符 | string | , | | prefix | 前缀 | string | '' | | suffix | 后缀 | string | '' |

| 方法 | 说明 | | -------- | ----------------- | | start() | 开始/重新开始动画 | | pause() | 暂停动画 | | resume() | 恢复动画 | | reset() | 重置到初始状态 |

LSeamlessScroll - 无缝滚动组件

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------ | -------- | ------ | | dataList | 滚动数据列表 | Array | [] | | classOptions | 滚动配置对象 | Object | - |

classOptions 配置项：

| 配置项 | 说明 | 类型 | 默认值 | | ------------ | ----------------------------- | --------- | ------ | | step | 滚动步长 | number | 1 | | direction | 滚动方向(0 下/1 上/2 左/3 右) | number | 1 | | limitMoveNum | 启动无缝滚动最小数量 | number | 5 | | hoverStop | 鼠标悬停暂停 | boolean | true | | singleHeight | 单步滚动高度 | number | 0 | | singleWidth | 单步滚动宽度 | number | 0 | | waitTime | 单步停止等待时间(ms) | number | 1000 |

文档

完整文档请访问：https://www.liumingxin.site/screen/

许可

MIT © LMX