VUE实现页面等比例适配
时间:2021-08-23
本文章向大家介绍VUE实现页面等比例适配,主要包括VUE实现页面等比例适配使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现原理
通过获取页面显示内容的比例,去跟项目自己设置的比例比较,然后算出缩放比例,通过给相应节点设置scal 来缩放实现等比适配
实现页面等比例显示,重点是两个知识点getBoundingClientRect()和transform: scale(x)。
getBoundingClientRect()
是用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
#不需要传参数
rectObject = object.getBoundingClientRect();
# 可以拿到这些返回值
/*
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
rectObject.width:元素自身的宽度;
rectObject.height:元素自身的高度;
*/
transform: scale()
是用于元素的缩放,不懂得可自行百度
实现方法
1、创建一个页面节点
<template>
<!-- cont 总是按高度或宽度铺满屏幕(cover) -->
<div ref="cont" class="fit-screen-cont" >
<!-- content 通过 scale(实际尺寸/设计尺寸) 来缩放实现等比适配 -->
<div class="fit-content" :style="getFitContentStyle()" >
<slot ref="content" class="fit-content"></slot>
</div>
</div>
</template>
2、缩放方法,算出页面缩放比例
updateScaleRatio(){
var rect = this.$refs.cont && this.$refs.cont.getBoundingClientRect();
var ratio = rect.width / rect.height;
var innerRatio = this.width / this.height;
if(ratio < innerRatio){
//Scale width
var scaleRatio = rect.width/ this.width ;
this.currentRatio = scaleRatio;
}
else{
scaleRatio = rect.height / this.height ;
this.currentRatio = scaleRatio;
}
},
3、实现节点缩放的方法,将此方法绑定在创建的页面节点上
getFitContentStyle(){
return {
width:this.width + 'px',
height:this.height + 'px',
transform:`scale(${this.currentRatio})`
}
}
4、通过页面监听页面变化和页面进入默认调用该方法,达到动态调节
mounted(){
window.addEventListener('resize',()=>{
this.updateScaleRatio();
})
this.updateScaleRatio();
},
完整代码
<template>
<!-- cont 总是按高度或宽度铺满屏幕(cover) -->
<div ref="cont" class="fit-screen-cont" >
<!-- content 通过 scale(实际尺寸/设计尺寸) 来缩放实现等比适配 -->
<div class="fit-content" :style="getFitContentStyle()" >
<slot ref="content" class="fit-content"></slot>
</div>
</div>
</template>
<script>
export default {
data(){
return {
width:1920,
height:1080,
currentRatio:1
}
},
mounted(){
window.addEventListener('resize',()=>{
this.updateScaleRatio();
})
this.updateScaleRatio();
},
methods:{
updateScaleRatio(){
var rect = this.$refs.cont && this.$refs.cont.getBoundingClientRect();
var ratio = rect.width / rect.height;
var innerRatio = this.width / this.height;
if(ratio < innerRatio){
//Scale width
var scaleRatio = rect.width/ this.width ;
this.currentRatio = scaleRatio;
}
else{
scaleRatio = rect.height / this.height ;
this.currentRatio = scaleRatio;
}
},
getFitContentStyle(){
return {
width:this.width + 'px',
height:this.height + 'px',
transform:`scale(${this.currentRatio})`
}
}
}
}
</script>
<style lang="scss" scoped>
.fit-screen-cont{
display:flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
flex:1;
overflow:hidden;
.fit-content{
flex:1;
transform-origin: center;
overflow: hidden;
position: absolute;
}
}
</style>
原文地址:https://www.cnblogs.com/wangchangzhi/p/15177498.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kafka_2.11-2.0.0_安装部署
- 谈escapeshellarg绕过与参数注入漏洞
- Django debug page XSS漏洞(CVE-2017-12794)分析
- kafka_2.11-2.0.0_常用操作
- shell脚本:通过域名获取证书的过期时间
- Shell按行读取文件的3种方法
- 客户端 session 导致的安全问题
- Shell脚本常用模板
- 利用最新Apache解析漏洞(CVE-2017-15715)绕过上传黑名单
- GitHub-创建仓库与本地同步
- GitHub-暂存区与版本回退
- GitHub-版本管理
- 使用CDP遇到的问题1
- GitHub-分支管理01
- GitHub-分支管理02-BUG与Feature分支