0.0.20 • Published 8 months ago
vue-scale-container v0.0.20
vue-scale-container
支持 vue3 和 vue2 的大屏自适应缩放组件
- 仓库地址:github
安装
npm install vue-scale-container
使用
<template>
<VueScaleContainer fit="w-full">
<div></div>
</VueScaleContainer>
</template>
<script setup>
import VueScaleContainer from 'vue-scale-container'
</script>
Props
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 设计图宽度 | Number | 1920 |
height | 设计图高度 | Number | 1080 |
minHeight | 代码自适应最小支持高度, 0 则忽略 | Number | 0 |
maxHeight | 代码自适应最大支持高度, 0 则忽略 | Number | 0 |
fit | 适应类型 | fill / w-full | fill |
forceUpdateOnResize | 是否在 resize 事件强制重新渲染子元素 | Boolean | false |
minHeight、maxHeight
设置 minHeight 和 maxHeight 是为了在此区间内,尽量保证缩放不变形,
浏览器不全屏,高度 930px, 代码在高度上利用百分比和间距,适配 930 的屏幕,在 930-1080 的高度上,不变形
浏览器为 16:10 的屏幕,高度 1200px, 代码在高度上利用百分比和间距,适配 1200 的屏幕,在 1080-1200 的高度上,比变形
fit 类型
- fill: 充满浏览器全屏,当浏览器宽高比和设计图图宽高比不同时,会出现变形
- w-full: 宽度充满浏览器,高度大于或小于浏览器高度
0.0.20
8 months ago
0.0.19
8 months ago
0.0.18
8 months ago
0.0.17
8 months ago
0.0.16
8 months ago
0.0.15
11 months ago
0.0.14
11 months ago
0.0.13
11 months ago
0.0.12
11 months ago
0.0.11
11 months ago
0.0.10
11 months ago
0.0.9
11 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.5
11 months ago
0.0.4
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago