super_video/src/composables

Composables 使用说明

useScale Hook

功能描述

基于1920*1080设计稿进行等比例缩放的响应式hook，确保应用在不同屏幕尺寸下保持设计比例。

使用方法

<template>
  <div class="my-component">
    <h1>当前缩放比例: {{ scale }}</h1>
    <p>窗口尺寸: {{ windowWidth }} x {{ windowHeight }}</p>
  </div>
</template>

<script setup lang="ts">
import { useScale } from '@/composables/useScale'

const { scale, windowWidth, windowHeight, scaleStyle, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale()
</script>

返回值说明

• windowWidth: 当前窗口宽度
• windowHeight: 当前窗口高度
• scale: 当前缩放比例
• scaledWidth: 缩放后的实际宽度
• scaledHeight: 缩放后的实际高度
• offsetX: 水平居中偏移量
• offsetY: 垂直居中偏移量
• scaleStyle: 完整的缩放样式对象
• DESIGN_WIDTH: 设计稿宽度 (1920)
• DESIGN_HEIGHT: 设计稿高度 (1080)

特性

1. 等比例缩放: 保持设计稿的宽高比不变
2. 居中显示: 内容在视窗中居中显示
3. 响应式: 自动监听窗口大小变化
4. 性能优化: 使用computed缓存计算结果
5. TypeScript支持: 完整的类型定义

注意事项

• 设计稿尺寸固定为1920*1080
• 缩放比例取宽高比的最小值，确保内容完全显示
• 超出设计稿尺寸的内容会被裁剪
• 建议在根组件App.vue中使用，确保全局生效