color-star-custom-methods
v0.0.10
Published
## 安装
Readme
color-star-custom-methods
安装
pnpm add color-star-custom-methods使用方法
usePageZoomController
页面缩放控制器 Hook，用于根据屏幕分辨率自动缩放页面，确保在不同分辨率下的一致显示效果。
基本用法
<template>
<div
class="app-container"
:class="containerClasses"
:style="containerStyles"
>
<!-- 你的应用内容 -->
</div>
</template>
<script setup>
import { usePageZoomController } from 'color-star-custom-methods'
// 使用页面缩放控制器
const { containerStyles, containerClasses } = usePageZoomController()
</script>
<style scoped>
.app-container {
width: 100%;
height: 100%;
}
</style>配置选项
const { containerStyles, containerClasses, scaleValue, updateScale } = usePageZoomController({
minScale: 0.9, // 最小缩放比例，默认为0.9
enableZoomPrevention: false // 是否启用浏览器缩放防止，默认为false
})返回值
| 属性 | 类型 | 说明 |
|------|------|------|
| containerStyles | ComputedRef<Object> | 容器样式对象，包含 transform、transformOrigin、position、top、left、width、height |
| containerClasses | ComputedRef<Object> | 容器类名对象，包含 app-container 和 relative |
| scaleValue | Ref<number> | 当前缩放比例值 |
| defaultScale | number | 默认缩放比例（常量：1） |
| minScale | number | 最小缩放比例（配置值） |
| updateScale | Function | 手动更新缩放比例的方法 |
样式说明
Hook 会自动处理以下样式：
- 缩放变换：通过
transform: scale()实现页面缩放 - 定位调整：当缩放比例不为1时，自动设置
position: fixed和相关定位属性 - 尺寸计算：自动计算容器的宽高，确保缩放后内容完整显示
- 字体优化：自动为
.app-container添加字体渲染优化样式，防止缩放时字体模糊
自动注入的CSS样式：
.app-container * {
/* 优化字体渲染，防止缩放时字体模糊 */
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
}这些样式会在 hook 挂载时自动添加到页面的 <head> 中，卸载时自动移除，无需手动编写。
高级用法
<template>
<div
class="app"
:class="{
'custom-class': true,
...containerClasses
}"
:style="{
...containerStyles,
backgroundColor: '#f0f0f0'
}"
>
<div>当前缩放比例: {{ scaleValue }}</div>
<button @click="updateScale">手动更新缩放</button>
</div>
</template>
<script setup>
import { usePageZoomController } from 'color-star-custom-methods'
const {
containerStyles,
containerClasses,
scaleValue,
defaultScale,
minScale,
updateScale
} = usePageZoomController({
minScale: 0.8, // 设置最小缩放比例为 0.8
enableZoomPrevention: true // 启用浏览器缩放防止
})
// 在模板中使用
console.log(`默认缩放比例: ${defaultScale}`) // 输出: 1（常量）
console.log(`最小缩放比例: ${minScale}`) // 输出: 0.8
</script>注意事项
- 基准分辨率：默认基准分辨率为 1920x1080
- 缩放范围：默认缩放比例固定为 1，最小缩放比例默认为 0.9（可通过
minScale参数配置） - 响应式：自动监听窗口大小变化并更新缩放比例
- CSS变量：会设置
--app-scaleCSS变量，可用于其他需要反向缩放的元素
示例：配合Element Plus使用
<template>
<ElConfigProvider :locale="zhCn">
<div
class="app-wrapper"
:class="containerClasses"
:style="containerStyles"
>
<!-- 应用内容 -->
</div>
</ElConfigProvider>
</template>
<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn'
import { usePageZoomController } from 'color-star-custom-methods'
const { containerStyles, containerClasses } = usePageZoomController()
</script>calculateScale
单独计算缩放比例的工具函数。
import { calculateScale } from 'color-star-custom-methods'
const scale = calculateScale()
console.log('当前缩放比例:', scale)开发
构建
pnpm run build开发模式
pnpm run devLicense
MIT