vue3 21 数据大屏scale

ANNENBERG

已于 2024-05-11 09:53:33 修改

阅读量232

点赞数 1

文章标签：前端

于 2024-01-26 00:27:44 首次发布

本文链接：https://blog.csdn.net/ANNENBERG/article/details/131624944

版权

数据类型？：，有就指定

40.根据菜单动态生成路由，将路由放到store里

配置路由数据类型：

在template标签上做遍历的好处是，标签不会渲染到页面

菜单的递归（Menu）:

130数据大屏:

法1：

// 数据大屏的dom
let screen = ref<HTMLElement>()

法2：

// 设计稿基准宽度和高度
      baseWidth: 1920,
      baseHeight: 1080,
      // 当前屏幕的实际宽度和高度
      screenWidth: 0,
      screenHeight: 0,
      // 计算得到的缩放因子
      scaleFactor: 1,

<template>
  <div id="app" ref="screenContainer">
    <router-view />
  </div>
</template> 

initScreenSize () {
      // 获取当前屏幕的实际宽度和高度
      this.screenWidth = this.$refs.screenContainer.clientWidth;
      this.screenHeight = this.$refs.screenContainer.clientHeight;
      // 计算缩放比例，这里以宽度为基础进行计算，也可以根据需求调整为高度或其他策略
      const scaleWidth = this.screenWidth / this.baseWidth;
      const scaleHeight = this.screenHeight / this.baseHeight;
      // 选择较小的缩放比例，以防止内容超出屏幕
      this.scaleFactor = Math.min(scaleWidth, scaleHeight);
      // 如果需要等比例缩放并允许留白，可以统一使用一个比例，如：
      // this.scaleFactor = Math.min(1, Math.min(scaleWidth, scaleHeight));
      // 触发重新渲染
      // this.$forceUpdate();
      this.$refs.screenContainer.style.transform = `scale(${this.scaleFactor})`
    },
 beforeDestroy () {
    window.removeEventListener('resize', this.initScreenSize);
  },
 mounted () {
    if (this.$refs.screenContainer.clientWidth > this.baseWidth) {
      this.initScreenSize();
      window.addEventListener('resize', this.initScreenSize);
    }
    document.body.style.background = this.currentStyle['--primary-color-4'];
  },