一个轻量级的大屏数据展示适配方案
- 比较轻量,不依赖其他库
- 参数配置灵活
安装
$ npm i -s screen-display
使用
<template>
<div id="app">
<div id="dashboard">大屏内容</div>
</div>
</template>
<script>
import ScreenDisplay from 'screen-display';
export default {
mounted() {
let screen = new ScreenDisplay({
el: '#dashboard',
})
this.$on('hook:beforeDestroy', () => {
screen.destory();
})
}
}
</script>
类型: Element
或String
必须: 是
默认: 无
说明:可以传入一个dom节点,也可以传入id选择器
let options = {el: document.querySelector('#dashboar')};
let options = {el: '#dashboard'};
类型: Number
必须: false
默认: 1920
说明:设计稿宽度
let options = {designWidth: 1920};
类型: Number
必须: false
默认: 1080
说明:设计稿高度
let options = {designHeight: 1080};
类型: Number
必须: false
默认: 300
说明:默认会监听浏览器resize事件,当发生resize时,延迟多久重新计算大屏,单位毫秒。
注意:如果配置-1
,则没有延迟。
let options = {resizeTimer: 300};
类型: Boolean
必须: false
默认: false
说明:是否禁用大屏自动重新计算,当值为true时,即便发生resize了,大屏也不会重新计算
let options = {disabledResize: false};
类型: String
必须: false
默认: top-center
说明:当当前展示设备与设计稿屏幕比例不一致时,大屏的兼容展示位置
// 纵向贴顶,横向贴左
let options = {compatPosition: 'top-left'};
// 纵向贴顶,横向居中
let options = {compatPosition: 'top-center'};
// 纵向贴顶,横向贴右
let options = {compatPosition: 'top-right'};
// 纵向贴底,横向贴左
let options = {compatPosition: 'bottom-left'};
// 纵向居中,横向贴左
let options = {compatPosition: 'center-left'};
// 纵向居中,横向居中
let options = {compatPosition: 'center-center'};
类型: Function
必须: false
默认: 无
说明:每次大屏重新计算完成后触发的回调函数
let options = {
onResize (instance, {actualWidth,actualHeight}){
// instance:当前实例
// actualWidth:当前大屏实际宽度
// actualHeight:当前大屏实际高度
}
};
Function
手动调用重新计算的函数
let screen = new ScreenDisplay({el: '#dashboard'});
screen.resize()
Function
移除对resize的事件监听
let screen = new ScreenDisplay({el: '#dashboard'});
screen.destroy()