vue 屏幕自适应及全屏放大缩小

最新推荐文章于 2024-08-09 07:04:17 发布

代码敲着敲着就睡了

最新推荐文章于 2024-08-09 07:04:17 发布

阅读量3.8k

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_49261425/article/details/118905026

版权

本文介绍了在Vue项目中实现屏幕自适应和全屏功能的方法，包括在data中设置变量，JS部分的处理逻辑，以及相应的样式调整，帮助开发者优化用户体验。

摘要由CSDN通过智能技术生成

<div id="screen-content" :class="{'fix':!flag}">
  <div id="main">
    <!--这里放内容-->
    <!--放大缩小-->
    <div id="screen" @click="maxScreen"></div>
  </div>
</div>

2.data中

data(){
    return{
        screenWidth: document.documentElement.clientWidth,//屏幕宽度
        screenHeight: document.documentElement.clientHeight,//屏幕高度
        scaleNum: '',
        flag: true, //全屏
    }
}

3.js

//屏幕
mounted(){
    let self = this
    self.scale()
    window.onresize = function() {
      self.screenWidth = document.documentElement.clientWidth
      self.screenHeight = document.documentElement.clientHeight
    }
  },
methods:{
    //全屏显示
    maxScreen() {
      let docElm = document.documentEle