ScreenDisplay：一个轻量级大屏适配展示方案demo做的很简单，但是应用场景应该...还是有的吧... 说明：

背景

最近公司的项目需求，基本上都是和可视化相关的（比如拖拽布局、大屏展示之类的），如果你也遇到以下需求点，那么这个小插件就有用武之地了😄

需要让你的大屏展示区域，在任何屏幕、设备上的显示状态，都和设计稿的比例保持一致，并且都在屏幕的可视范围内，同比缩放；
当浏览器放大缩小，或者大屏区域的外层盒子放大缩小的时候，你的内容区域需要保持宽高比，同比缩放；
简单的说，就是需要让某个区域里的内容，像是图片一样，永远保持比例的放大缩小；

效果

话不多说，先看东西

demo做的很简单，但是应用场景应该...还是有的吧...
借鉴了百度大屏可视化的适配方案，在此基础上做了一些些的扩展

源码（蹲个star...）

特性

比较轻量，不依赖其他库；
参数配置灵活；
除了可以监听window的resize事件触发重新计算以外，还可以监听大屏节点上层的节点宽高变化；

使用

安装

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

resizeEvent

类型: String
必须: false
默认: window
说明：默认当window或者上级元素发生resize时，触发大屏重新计算

// 监听window resize
let options = {resizeEvent: 'window'};
// 监听上级div resize
let options = {resizeEvent: 'parent'};

disabledResize

类型: Boolean
必须: false
默认: false
说明：是否禁用大屏自动重新计算，当值为true时，即便window发生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

screenInstance.resize

Function

手动调用重新计算的函数

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

screenInstance.destroy

Function

移除对window.resize和parent.resize的事件监听

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