看板自适应-scale方案

2024-4-12 16:20

146 字

7 分钟

vue3版本

<!--
 * @Author: yangzihua
 * @Date: 2024-04-12 15:26:36
 * @LastEditors: yangzihua
 * @LastEditTime: 2024-04-12 16:07:50
 * @Description: 
-->
<template>
  <div
    class="main-scale"
    :style="{ width: innerWidth + 'px', height: innerHeight + 'px', backgroundColor: '#010916' }"
  >
    <div class="board" :style="{ transform: `scale(${getScale()})` }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

let innerWidth = ref(window.innerWidth);
let innerHeight = ref(window.innerHeight);

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

function getScale() {
  const widthBg = 1920;
  const heightBg = 1080;
  const widthScale = innerWidth.value / widthBg;
  const heightScale = innerHeight.value / heightBg;
  return Math.min(widthScale, heightScale);
}

function handleResize() {
  innerWidth.value = window.innerWidth;
  innerHeight.value = window.innerHeight;
}
</script>

<style scoped>
.main-scale {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.board {
  flex: 0 0 auto;
}
</style>

react版本-类组件


import classNames from 'classnames';
import React from 'react';
import styles from './index.less';

class Scale extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.listenWindow);
    return () => {
      document.removeEventListener('resize', this.listenWindow);
    };
  }

  listenWindow = () => {
    this.setState({
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
    });
  };

  getScale = () => {
    const { widthBg = 1920, heightBg = 1080 } = this.props;
    const widthScale = window.innerWidth / widthBg;
    const heightScale = window.innerHeight / heightBg;
    return widthScale > heightScale ? heightScale : widthScale;
  };

  render() {
    const { children, mainColor = '#fff', boardStyle } = this.props;
    const scaleValue = this.getScale();
    const { innerWidth, innerHeight } = this.state;
    return (
      <div
        className={styles.main}
        style={{
          width: innerWidth,
          height: innerHeight,
          backgroundColor: mainColor,
        }}
      >
        <div
          className={classNames(styles.board, boardStyle)}
          style={{
            transform: `scale(${scaleValue})`,
          }}
        >
          {children}
        </div>
      </div>
    );
  }
}

export default Scale;


// index.less
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.board {
  flex: 0 0 auto;
}

欢迎阅读！

Edgar4841

Windows Chrome

3 周前
2025-8-06 6:59:02

https://shorturl.fm/V9Lvd
Conner4257

Windows Chrome

3 周前
2025-8-06 21:49:33

https://shorturl.fm/vzSnD
Lisa4330

Windows Chrome

3 周前
2025-8-07 16:06:21

https://shorturl.fm/9ELrG
Heidi3916

Windows Chrome

3 周前
2025-8-07 23:33:21

https://shorturl.fm/r0Eus
Ingrid4399

Windows Chrome

2 周前
2025-8-08 5:24:04

https://shorturl.fm/zgyvI
Jason3802

Windows Chrome

2 周前
2025-8-09 11:51:43

https://shorturl.fm/m9QDB
Jasper4542

Windows Chrome

2 周前
2025-8-09 18:27:42

https://shorturl.fm/q6nbt
Jasmine4833

Windows Chrome

2 周前
2025-8-11 6:49:29

https://shorturl.fm/27ZWJ
Daniel3018

Windows Chrome

2 周前
2025-8-12 6:43:21

https://shorturl.fm/VxkIL
Alejandro2597

Windows Chrome

2 周前
2025-8-12 14:04:18

https://shorturl.fm/OtMZa
Anna2628

Windows Chrome

2 周前
2025-8-13 2:57:58

https://shorturl.fm/aBt9h
Hallie4988

Windows Chrome

1 周前
2025-8-16 9:25:20

https://shorturl.fm/SJMLk
Theresa1007

Windows Chrome

1 周前
2025-8-16 19:05:25

https://shorturl.fm/P2Emn
Brandon4783

Windows Chrome

5 天前
2025-8-20 18:33:38

https://shorturl.fm/W7yp9
Bella3236

Windows Chrome

4 天前
2025-8-21 7:01:10

https://shorturl.fm/Uopxl
Alaina2297

Windows Chrome

3 天前
2025-8-22 15:02:16

https://shorturl.fm/vdw2l
Ray4455

Windows Chrome

2 天前
2025-8-23 21:57:50

https://shorturl.fm/XS0FJ