background

These days, most of the company’s project needs are related to visualization (drag and drop layouts, large displays, etc.), so if you have any of the following needs, then this little plug-in can come in handy 😄

  1. You need to make your large screen display area, on any screen, device display state, and the proportion of the design draft is consistent, and are within the visual range of the screen, compared to the scale;
  2. When the browser zooms in and out, or the outer box of a large screen area zooms in and out, your content area needs to maintain an aspect ratio and zoom out;
  3. To put it simply, it is necessary to keep the content in a certain area, like pictures, always zoom in and out of proportion;

The effect

Don’t talk too much. Look at things first

  • The demo is simple, but the application scenario should be… There are…

  • Draw lessons from Baidu big screen visual adaptation scheme, on this basis to do some of the expansion

Source code (squat star…)

  • GitHub:github.com/zhuyuqian/s…
  • Npm:www.npmjs.com/package/scr…
  • Pkg:unpkg.com/screen-disp…

features

  • Relatively lightweight, does not rely on other libraries;
  • Flexible parameter configuration;
  • In addition to listening for window resize events to trigger recalculation, it can also listen for node width and height changes in the upper layer of the large screen node.

use

The installation

$ npm i -s screen-display
Copy the code

use

<template>
    <div id="app">
      <div id="dashboard">Domestic content</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>
Copy the code

configuration

el

Type: Element or String Required: Yes Default: None Description: You can pass in a DOM node or an ID selector

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

designWidth

Type: Number Mandatory: false Default: 1920 Description: Design document width

let options = {designWidth: 1920};
Copy the code

designHeight

Type: Number Mandatory: false Default: 1080 Description: Design document height

let options = {designHeight: 1080};
Copy the code

resizeTimer

Type: Number Required: false Default: 300 Description: By default, the browser listens for the resize event. When the resize event occurs, the delay for recalculating the large screen, in milliseconds. Note: If configured -1, there is no delay.

let options = {resizeTimer: 300};
Copy the code

resizeEvent

Type: String Mandatory: false Default: window Description: By default, large screen recalculation is triggered when window or superior elements are resized

// Listen for window resize
let options = {resizeEvent: 'window'};
// Listen to the parent div resize
let options = {resizeEvent: 'parent'};
Copy the code

disabledResize

Type: Boolean Mandatory: false Default: false Description: Specifies whether to disable automatic recalculation of the large screen. If the value is true, the large screen does not recalculate even if the window is resized

let options = {disabledResize: false};
Copy the code

compatPosition

Type: String Mandatory: false Default: top-center Note: If the screen proportion of the current device is inconsistent with that of the design document, the display position of the large screen is compatible

// Stick the top vertically and stick the left horizontally
let options = {compatPosition: 'top-left'};
// Stick to the top vertically and center horizontally
let options = {compatPosition: 'top-center'};
// Vertical paste top, horizontal paste right
let options = {compatPosition: 'top-right'};
// Vertical paste bottom, horizontal paste left
let options = {compatPosition: 'bottom-left'};
// Vertical center, horizontal paste left
let options = {compatPosition: 'center-left'};
// Vertical center, horizontal center
let options = {compatPosition: 'center-center'};
Copy the code

onResize

Type: Function Mandatory: false Default: None Description: A callback Function triggered after each large screen recalculation is complete

let options = {
    onResize (instance, {actualWidth,actualHeight}){
        // instance: indicates the current instance
        // actualWidth: actualWidth of the current large screen
        // actualHeight: actualHeight of the current large screen}};Copy the code

API

screenInstance.resize

Function

Manually call the recalculated function

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

screenInstance.destroy

Function

Remove window.resize and parent-resize event listening

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