Vue2 large screen adaptation plug-in vue2-scale-box

Vue2 large screen adaptation zoom component

vue3 version: https://www.npmjs.com/package/vue3-scale-box

Install:

npm install vue2-scale-box
or
yarn add vue2-scale-box

use:

<template>
  <div id="app">
    <ScaleBox
      :width="1920"
      :height="1080"
      bgc="transparent"
      :delay="100"
      :isFlat="false"
    >
      <template>
        <h1>大屏内容</h1>
      </template>
    </ScaleBox>
  </div>
</template>

import ScaleBox from 'vue2-scale-box'

export default {
  components: {
    ScaleBox
  }
}

Attributes:

• width The default width is 1920

• height The default height is 1080

• bgc background color default "transparent"

• delay adaptive scaling anti-shake delay time (ms) default 100

• isFlat whether to enable the stretch mode default false

• @scaleChange The method of changing the scaling value can dynamically obtain the changed value of the scale. Note: the scale value in stretch mode is:

  [x scaling value, y scaling value]; scale value in non-stretching mode: proportional scaling value