vue大屏展示,vue大屏自适应
这篇文章主要为大家详细介绍了某视频剪辑软件大屏展示适配，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件大屏展示适配的具体代码，供大家参考，具体内容如下
1 .实用工具文件夹建一个文件简历以下代码
导出函数useIndex (appRef) {
//* appRef指向最外层容器
//* 定时函数
让定时器=空
//* 默认缩放值
常量刻度={
宽度："1",
高度："1"
}
//* 设计稿尺寸(px)
常数基底宽度=1920
const baseHeight=1080
//* 需保持的比例（默认2)
//const base proportion=parse float((基宽/基高))。toFixed(5))
const baseProportion=2
常量计算箱=()={
//当前宽高比
const current rate=parse float((window。内部宽度/窗口。内部高度).toFixed(5))
如果(appRef) {
if (currentRate baseProportion) {
//表示更宽
规模。宽度=((窗口。内部高度*底部比例)/底部宽度.toFixed(5)
规模。高度=(窗口。内部高度/底部高度).toFixed(5)
appref。风格。transform=` scale($ { scale。width }，${scale.height}) translate(-50%，-50%)
}否则{
//表示更高
规模。高度=((窗口。内部宽度/底部比例)/底部高度.toFixed(5)
规模。宽度=(窗口。内部宽度/底部宽度).toFixed(5)
appref。风格。transform=` scale($ { scale。width }，${scale.height}) translate(-50%，-50%)
}
}
}
const resize=()={
清除超时（定时器)
timer=setTimeout(()={
calcRate()
}, 200)
}
//改变窗口大小重新绘制
const windowDraw=()={
窗户。addevent侦听器( resize ，resize)
}
返回{
appRef，
calcRate，
窗口绘制
}
}
2.app.vue结构样式
模板
div ref=appRef class=main
div class=布局容器
/div
/div
/模板
脚本
从" @/utils/utilsDram.js "导入{ useIndex }
导出默认值{
已安装(){
const { calcRate，windowDraw }=useIndex(this .$refs.appRef)
calcRate()
windowDraw()
}
}
/脚本
样式lang=scss 范围。主要{
颜色：# d 3d 6 DD
宽度：1920像素
高度：1080像素
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
变换-原点：左上；布局-容器{
宽度：100%;
身高：100%;
}
}
/风格
3.字体大小盒子宽度直接设置像素不管放大缩小都是最初的样子，基本页面大小不会相差太远，下图是页面放大500倍的效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。