大屏适配器

背景：大屏适配是前端开发必不可少的技能，适配各种大屏也是为了给用户更好的体验。scale（缩放）是当前大屏使用较多的方案, 为方便使用, 封装此组件。

 组件核心是 使用 CSS3 属性 transform: scale(width, height) 实现, 默认宽高比是相对 当前窗口内容区域的可用宽高而言, 不包括边框、菜单栏。

组件-BigScreenCont 

1. 将下方 BigScreenCont 压缩包解压放到 /src/components 目录下

2. 组件注册

import BigScreenCont from '@/components/BigScreenCont'
Vue.component('BigScreenCont', BigScreenCont)

3. 使用

<BigScreenCont>
  <div class="contatn">我是大屏内容</div>
</BigScreenCont>

4. 组件属性

props: {
    // 容器展示模式, 默认 flexible
    // flexible 长宽都改变的弹性模式 铺面全屏
    // scale    保持设计尺寸宽高比不变, 按照宽高最小比例进行缩放
    showType: { type: String, default: 'flexible' },
    // 实例名称
    bigScreenContRef: { type: String, default: 'bigScreenContRef' },
    // 设计稿尺寸 - 宽 px
    width: { type: Number, default: 1920 },
    // 设计稿尺寸 - 高 px
    height: { type: Number, default: 1080 },
    // 屏幕大小防抖的延迟时间
    delay: { type: Number, default: 200 },
  },

插件 v-scale-screen

它其实也是通过 scale 进行等比例计算放大和缩小的，和方案一的原理是一样的，还可以通过 api 调整样式。

传送门：v-scale-screen