可视化大屏实现屏幕自适应和自动全屏的实现

halo1416

已于 2024-03-05 09:58:04 修改

阅读量3.9k

点赞数 31

分类专栏： vue 文章标签： vue 可视化大屏 screenfull

于 2024-03-04 17:33:19 首次发布

本文链接：https://blog.youkuaiyun.com/halo1416/article/details/136457006

版权

前言

在可视化大屏项目中，屏幕适配是绕不过去的一个问题（ps：如果知道大屏展示的屏幕是固定的，当我没说）。这里简单介绍通过 css的transform属性里面的 scal() 实现常规屏幕适配。

常规屏幕：

1366 * 768
1920 * 1080 （最常见的大屏分辨率）
2560 * 1440 （2k）
3840 * 2160 （4k）
5120 * 2880 （5k）

其他场景屏幕：

1280 * 800
1440 * 900
…

一、自适应实现

1. 新增自适应组件

<template>
  <div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
   
  name: 'ScreenAdapter',
  props: {
   
    w: {
    // 设计图尺寸宽
      type: Number,
      default: 1920,
    },
    h: {
    // 设计图尺寸高
      type: Number,
      default: 1080,
    },
  },
  data() {
   
    return {
   
      style: {
   
        width: `${
     this.w}px`