forked from zhongyidian/super_video
feat: 添加 Husky 和 commit 限制配置
This commit is contained in:
commit
27e0c23b3f
125 files changed
+5760
No files matched your search
@@ -0,0 +1,52 @@
|
||||
# Composables 使用说明
|
||||
|
||||
## useScale Hook
|
||||
|
||||
### 功能描述
|
||||
|
||||
基于1920\*1080设计稿进行等比例缩放的响应式hook,确保应用在不同屏幕尺寸下保持设计比例。
|
||||
|
||||
### 使用方法
|
||||
|
||||
```vue
|
||||
<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中使用,确保全局生效
|
||||
Reference in new issue
Block a user