hy-proportional

hy-proportional

一个轻量级的 自适应缩放插件，可以根据父元素大小按比例缩放子元素，同时保持居中。
支持 Vue 3 指令 和 原生 JS / TypeScript 函数 两种使用方式。

安装

npm install hy-proportional
# or
yarn add hy-proportional

使用方式

1. Vue 3 指令

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ScaleDirective from 'hy-proportional'

const app = createApp(App)
app.use(ScaleDirective)
app.mount('#app')

模板示例

<template>
  <div class="container" style="width: 100%; height: 500px; position: relative;">
    <div v-hyscale="{ designWidth: 400, designHeight: 300 }">
      我会自动缩放
    </div>
  </div>
</template>

• designWidth 和 designHeight 可选，不传则自动使用元素初始宽高。
• 元素会保持宽高比例，居中显示。
• 指令会自动监听父元素和窗口大小变化。

2. 原生 JS / TypeScript 使用

import { Proportional } from 'hy-proportional'

const el = document.getElementById('my-element')
const scaler = Proportional(el, { designWidth: 400, designHeight: 300 })

// 卸载时释放资源
scaler.destroy()

• Proportional 返回一个 Scaler 对象，包含 destroy() 方法。
• 可以在任意环境中使用，无需 Vue。

API

v-hyscale (Vue 3 指令)

参数	类型	默认	描述
designWidth	number	元素初始宽度	缩放基准宽度
designHeight	number	元素初始高度	缩放基准高度

Proportional(el, options) (原生函数)

参数	类型	描述
el	HTMLElement	要缩放的元素，必须有父元素
options	ScaleOptions	可选参数，指定设计宽高

返回值 Scaler：

interface Scaler {
  destroy: () => void
}

• 调用 destroy() 可以移除监听，释放内存。

注意事项

• 元素必须有父元素，否则无法进行缩放。
• 指令和函数会将元素 position 设置为 absolute，请确保父元素有 position: relative/absolute/fixed。
• 适合自适应布局或按比例缩放需求，尤其是游戏、图表、可视化组件等。