screen-display v1.0.6

一个轻量级的大屏数据展示适配方案

目录

• 特性
• 使用
  • 配置
  • API

效果

点我查看

特性

• 比较轻量，不依赖其他库
• 参数配置灵活

使用

安装

$ 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>

配置

el

类型: Element或String 必须: 是 默认: 无 说明：可以传入一个dom节点，也可以传入id选择器

let options = {el: document.querySelector('#dashboar')};
let options = {el: '#dashboard'};

designWidth

类型: Number 必须: false 默认: 1920 说明：设计稿宽度

let options = {designWidth: 1920};

designHeight

类型: Number 必须: false 默认: 1080 说明：设计稿高度

let options = {designHeight: 1080};

resizeTimer

类型: Number 必须: false 默认: 300 说明：默认会监听浏览器resize事件，当发生resize时，延迟多久重新计算大屏，单位毫秒。 注意：如果配置-1，则没有延迟。

let options = {resizeTimer: 300};

disabledResize

类型: Boolean 必须: false 默认: false 说明：是否禁用大屏自动重新计算，当值为true时，即便发生resize了，大屏也不会重新计算

let options = {disabledResize: false};

compatPosition

类型: 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'};

onResize

类型: Function 必须: false 默认: 无 说明：每次大屏重新计算完成后触发的回调函数

let options = {
    onResize (instance, {actualWidth,actualHeight}){
        // instance：当前实例
        // actualWidth：当前大屏实际宽度
        // actualHeight：当前大屏实际高度
    }
};

API

.resize

Function

手动调用重新计算的函数

let screen = new ScreenDisplay({el: '#dashboard'});
screen.resize()

.destroy

Function

移除对resize的事件监听

let screen = new ScreenDisplay({el: '#dashboard'});
screen.destroy()

License

MIT license