vue 项目的大屏自适应方案

Bubluu

于 2024-05-17 10:30:00 发布

阅读量296

点赞数 15

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45859470/article/details/138998378

版权

在这里插入图片描述

1、使用 scale-box 组件

vue2版本：vue2大屏适配缩放组件（vue2-scale-box - npm）

npm install vue2-scale-box

<template>
  <div id="content" class="content">
   <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
    <div class="box"></div>
    	</scale-box>
  </div>
</template>

<script>
import ScaleBox from 'vue2-scale-box'
export default {
  components: { ScaleBox },
  data() {
    return {}
  },
  created() {

  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .box {
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: skyblue;
  }
}
</style>

2、vue3版本：vue3大屏适配缩放组件（vue3-scale-box - npm）

npm install vue3-scale-box

<template>
    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
        <router-view />
    </ScaleBox>
</template>
 
<script>
import ScaleBox from "vue3-scale-box";
</script>
 
<style lang="scss">
body {
    margin: 0;
    padding: 0;
    background: url("@/assets/bg.jpg");
}
</style>

3、自定义函数
创建rem.js文件


function setRem() {
    const designWidth = 1920
    const designHeight = 1080
    const dom = document.documentElement
    const domWidth = dom.clientWidth
    const domHeight = dom.clientHeight
    const currentScale = domWidth / domHeight
    const requiredScale = designWidth / designHeight
    const scale = currentScale < requiredScale ? domWidth / designWidth : domHeight / designHeight
    return scale
    // dom.style.transform = `scale(${scale})`
}
export default setRem;

使用

<template>
  <div id="content" class="content">
    <div class="box"></div>
  </div>
</template>

<script>
import setRem from '../utils/rem'
export default {
  data() {
    return {}
  },
  created() {
    // dom.style.transform = `scale(${res})`
  },
  mounted() {
    let res = setRem()
    let dom = document.getElementById('content')
    dom.style.transform = `scale(${res})`
    window.onresize = function () {
      let res = setRem()
      let dom = document.getElementById('content')
      dom.style.transform = `scale(${res})`
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .box {
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: skyblue;
  }
}
}
</style>