vue-auto-scale

vue-auto-scale

介绍

基于 Vue 3 的大屏适配缩放组件，按设计稿尺寸将内容整体缩放以适配不同视口。

环境与版本

若仍在使用 Vue 2.7 以下，需自行安装 @vue/composition-api；Vue 2.7+ 已内置组合式 API。

安装

npm i vue-auto-scale -S

yarn add vue-auto-scale

pnpm add vue-auto-scale

使用说明

请将页面布局单位统一为 px（百分比等不受影响）。

按需引入（推荐）

<template>
  <VueAutoScale
    :width="1920"
    :height="1080"
    :delay="100"
    :scale-type="scaleType"
    :reverse-scaling-ids="['#div2']"
    @change="scaleChange"
  >
    <div class="my-demo">
      <!-- 不需要随整体缩放的区域（如地图），也可用选择器指向内部节点 -->
      <div id="div2"></div>
    </div>
  </VueAutoScale>
</template>

<script setup lang="ts">
import { VueAutoScale } from 'vue-auto-scale'

const scaleType = 1

const scaleChange = (scale: number | string, scale1: number | string) => {
  console.log('当前缩放比例', scale)
  console.log('反向缩放比例（用于抵消子元素）', scale1)
}
</script>

全局注册

import { createApp } from 'vue'
import VueAutoScalePlugin from 'vue-auto-scale'
import App from './App.vue'

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

注册后可在任意模板中使用 <vue-auto-scale>（与按需引入时标签名一致，以构建结果为准）。

属性（Props）

以上参数均支持响应式更新。

scaleType 取值

reverseScalingIds

内部通过 document.querySelector 查找节点，请传入 合法的 CSS 选择器（例如 #id、.class），不限于 id。可为单个字符串或字符串数组。

用于地图等需要保持「视觉像素」或需单独抵消 scale 的区域时，组件会对匹配元素设置宽高与 transform，以与外层缩放配合。

事件

仓库与反馈

• 主页：https://gitee.com/strivelei/vue-auto-scale
  若有其他需求或问题，欢迎在 Gitee 上提 Issue，后续会持续新增与优化。