scale适配 实现缩放自适应(vue3)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
实现思路:封装一个适配盒子组件,编写相关计算宽高比例方法,包裹需要适配的内容即可
1.适配盒子组件scaleBox
<template>
<div
class="ScaleBox"
:style="{
width: width + 'px',
height: height + 'px',
}"
>
<slot></slot>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { debounce, os } from "../util/scale"
let scale = reactive({
w: 1,
h: 1,
});
const { width, height } = screen
let getScale = () => {
// const wh = window.innerHeight / height;
// const ww = window.innerWidth / width;
// return [wh,ww];
const w = window.innerWidth / width
const h = window.innerHeight / height
if (window.innerWidth <= 800 || window.innerHeight <= 600) {
let scale = w < h ? w : h;
return [scale, scale]
}
return [h, w]
}
let setScale = (e) => {
// 缩放比
scale.h = getScale()[0];
scale.w = getScale()[1];
}
let reCalc = debounce(setScale)
onMounted(() => {
setScale();
window.addEventListener("resize", reCalc);
})
onUnmounted(() => {
window.removeEventListener("resize", reCalc)
})
</script>
<script>
export default {
name: "ScaleBox"
}
</script>
<style lang="less" scoped>
.ScaleBox {
position: absolute;
// transform: scale(v-bind('scale.h')) translate(-50%, -50%);
transform: scale(v-bind("scale.w"), v-bind("scale.h")) translate(-50%, -50%);
display: flex;
flex-direction: column;
transform-origin: top left;
left: 50%;
top: 50%;
transition: 0.2s;
z-index: 999;
// background: rgba(255, 0, 0, 0.3);
}
</style>
2.计算宽高比例方法 utils/scale.js
export let debounce = (fn, delay) => {
// 固定好16:9的宽高比,计算出最合适的缩放比
const delays = delay || 100;
let timer;
return function () {
const th = this;
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delays);
};
}
3.最后在需要适配的内容引入适配盒子包裹内容即可
效果如图
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)