数据大屏自适应方法

当当的麦当

已于 2024-04-15 17:06:55 修改

阅读量152

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

于 2023-02-21 13:34:27 首次发布

本文链接：https://blog.csdn.net/weixin_45695727/article/details/129140938

版权

vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该代码示例展示了一个Vue组件，用于根据设计尺寸（默认1920x1080）动态调整内容盒子的缩放比例，以适应不同窗口大小。它使用`ref`来存储状态，`onMounted`初始化方法监听窗口重置事件，并在窗口尺寸变化时更新内容的缩放比例，保持内容在窗口中的居中显示。CSS部分应用了transform进行比例缩放和位置调整。

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

<template>
  <div class="scale-box">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";
const width = ref(null), //设计宽度
  height = ref(null), //设计高度
  scale = ref(null);

const props = defineProps({
  width: {
    type: String,
    default: "1920",
  },
  height: {
    type: String,
    default: "1080",
  },
});

const init = () => {
  setScale();
  window.addEventListener("resize", setScale);
};

const setScale = () => {
  let ww = document.documentElement.clientWidth / props.width;
  let wh = document.documentElement.clientHeight / props.height;
  scale.value = ww < wh ? ww : wh;
};

init();
</script>

<style scoped lang="scss">
.scale-box {
  width:1920px;
  height: 1080px;
  transform: scale(v-bind(scale)) translate(-50%, -50%);
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>