vue大屏展示适配的方法

 更新时间:2021年10月25日 08:33:44   作者:weixin_43859882  
这篇文章主要为大家详细介绍了vue大屏展示适配,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue大屏展示适配的具体代码,供大家参考,具体内容如下

1.utils文件夹建一个文件cv以下代码

export function useIndex (appRef) {
  // * appRef指向最外层容器

  // * 定时函数
  let timer = null
  // * 默认缩放值
  const scale = {
    width: '1',
    height: '1'
  }
  // * 设计稿尺寸(px)
  const baseWidth = 1920
  const baseHeight = 1080

  // * 需保持的比例(默认2)
  // const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const baseProportion = 2
  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%)`
      } 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%)`
      }
    }
  }

  const resize = () => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 改变窗口大小重新绘制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  return {
    appRef,
    calcRate,
    windowDraw
  }
}

2.app.vue结构样式

<template>
  <div ref="appRef" class="main">
    <div class="layout-container">
    </div>
  </div>
</template>

<script>
import { useIndex } from '@/utils/utilsDram.js'
export default {
  mounted () {
    const { calcRate, windowDraw } =useIndex(this.$refs.appRef)
    calcRate()
    windowDraw()
  }
}
</script>
<style lang="scss" scoped>
.main {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .layout-container {
    width: 100%;
    height: 100%;
    }
   }
</style>

3.字体大小盒子宽度直接设置px不管放大缩小都是最初的样子,基本页面大小不会相差太远,下图是页面放大500倍的效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 解决VUE打包后与nginx代理出现加载速度超级慢的问题

    解决VUE打包后与nginx代理出现加载速度超级慢的问题

    这篇文章主要介绍了解决VUE打包后与nginx代理出现加载速度超级慢的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • 基于Vue全局组件与局部组件的区别说明

    基于Vue全局组件与局部组件的区别说明

    这篇文章主要介绍了基于Vue全局组件与局部组件的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue使用urlEncode问题

    vue使用urlEncode问题

    这篇文章主要介绍了vue使用urlEncode问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解关于vue2.0工程发布上线操作步骤

    详解关于vue2.0工程发布上线操作步骤

    这篇文章主要介绍了详解关于vue2.0工程发布上线操作步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue之elementUi的el-select同时获取value和label的三种方式

    vue之elementUi的el-select同时获取value和label的三种方式

    这篇文章主要介绍了vue之elementUi的el-select同时获取value和label的三种方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • VUE 实现滚动监听 导航栏置顶的方法

    VUE 实现滚动监听 导航栏置顶的方法

    今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue路由传参三种基本方式详解

    vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 搭建element-ui的Vue前端工程操作实例

    搭建element-ui的Vue前端工程操作实例

    下面小编就为大家分享一篇搭建element-ui的Vue前端工程操作实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue实现购物车选择功能

    vue实现购物车选择功能

    这篇文章主要为大家详细介绍了vue实现购物车选择功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 基于Vue实现卡片无限滚动动画

    基于Vue实现卡片无限滚动动画

    这篇文章主要为大家详细介绍了如何利用Vue制作出卡片无限滚动动画,文中的示例代码讲解详细,对我们学习有一定帮助,需要的可以参考一下
    2022-05-05

最新评论