vue-auto-scale
v0.2.4
Published
vue大屏缩放组件
Downloads
56
Readme
vue-auto-scale
介绍
vue大屏适配缩放组件
软件架构
支持vue2.7+ vue2.7 以下需安装 cnpm i @vue/composition-api -S
安装教程
npm i vue-auto-scale -S
or
yarn add vue-auto-scale
使用说明
使用时需要将页面中单位全部换成px 百分比不受影响
<template>
<vue-auto-scale
:width="1920"
:height="1080"
:delay="100"
:scale-type="scaleType"
:reverse-scaling-ids="['div2']"
>
<!-- 被缩放的元素-->
<div class="my-demo">
<!-- 不想被缩放的元素比如地图等 当然这个也可以写在 vue-auto-scale 标签外面-->
<div id="div2"></div>
</div>
</vue-auto-scale>
</template>
<script setup>
import VueAutoScale from "vue-auto-scale";
</script>
属性
width
宽度(设计搞宽度) 默认1920
height
高度(设计稿高度) 默认1080
delay
自适应缩放防抖延迟时间(ms) 默认100
scaleType
缩放类型1
: 强制铺满2
: 按比例缩放3
: 适应宽度4
: 适应高度 默认值1
reverse-scaling-ids
不被缩放的元素id 可以为数组或者字符串 默认为null
parent
获取宽高的时候是否使用父元素的宽高 默认false