vue3关于大屏的放大缩小功能_vue3.0大屏

效果：

放大前放大后：

1.首先创建一个文件夹，在此文件夹下新建autoScreen.js,plugins.js两个文件； 如：

autoScreen.js文件里的内容：

export default (_this) => {
  ((_this) => {
    // vue 对象
    // 动态获取vue组件实例
    const appRef = _this
 
    // * 默认缩放值
    const scale = {
      width: '1',
      height: '1'
    }
 
    // * 设计稿尺寸（px）
    const baseWidth = 1920
    const baseHeight = 1080
 
    // * 需保持的比例（默认1.77778）
    const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
 
    // 重新设置缩放比例值
    const calcRate = () => {
      // 当前视口的宽高比例
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (appRef) {
        // 获取到的当前实例
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%) translate3d(0,0,0)`
        } else {
          // 表示更高
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%) translate3d(0,0,0)`
        }
 
      }
 
    }
 
    const resize = () => {
      setTimeout(() => {
        calcRate()
      }, 200)
    }
 
    // 改变窗口大小重新绘制
    const windowDraw = () => {
      window.addEventListener('resize', resize)
    }
    windowDraw()
    calcRate()
  })(_this)
  /**
   * @参数说明
   * @_this 当前vue实例对象，用于获取当前的显示页面
   * @scrrenRef  vue2 中获取操作页面的根页面。页面的ref节点
   * **/
}

plugins.js文件里的内容：

 
//调用各个浏览器提供的全屏方法
export function enterFullScreen() {  //进入全屏
    let de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
    }
    console.log('已全屏')
}
//调用各个浏览器提供的退出全屏方法
export function exitFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    }else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    console.log('已还原')
}

2.在App.vue里引入autoScreen.js文件，并且设置一下样式

<template>
  <div id="screenRef" class="screen-container">
    <!--动态看板内容-->
    <router-view></router-view>
  </div>
 
 
</template>
 
<script setup>
import {onMounted} from "vue";
import autoScreen from "./utils/autoScreen.js";
// 挂载载
onMounted(() => {
  document.body.style.height = '100vh';
  document.body.style.margin = '0';
  const _this = document.getElementById('screenRef')
  autoScreen(_this)
});
</script>
 
<style>
.screen-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
</style>

3.在需要有放大缩小功能的页面导入plugins.js的放大缩小两个方法,需要设置一下该页面的css样式

<template>
<div class="wrapper">
   <div class="full_screen">
//有两个按钮，放大按钮，缩小按钮；此处我用两张图片代替按钮
     <img v-if="fullScreen" src="../../../assets/shrink_screen.png" alt="退出全屏" class="full_screen" @click="handleFullScreen()">
     <img v-else src="../../../assets/full_screen.png" alt="进入全屏" class="full_screen" @click="handleFullScreen()">
   </div>
 </div>
</template>
 
<script setup>
import { exitFullscreen, enterFullScreen} from "../../../utils/plugins"; //此处要改为自己的文件夹路径
const fullScreen = ref(false);//是否全屏
//全屏&退出全屏
const handleFullScreen = () => {
  fullScreen.value ? exitFullscreen() : enterFullScreen();
  fullScreen.value = !fullScreen.value
};
</script>
<style scoped>
.wrapper {
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  background: url('../../../assets/bg.png') center;
  background-size: contain;
  box-sizing: border-box;
  padding-top: 14px;
  position: relative;
}
</style>