vue大屏适配方案

前言

开发过大屏的铁汁们应该知道,前期最头疼的就是大屏适配,由于大屏项目需要在市面上不是很常见的显示器上进行展示,所以要根据不同的尺寸进行适配,今天我将为大家分享的我使用的大屏适配方案,话不多说,直接上效果图。

效果图

上面所展示的只是其中一种模式,其中一共有四种模式,分别为1-居中留白(按比例伸缩);、2-居中留白(若不超出屏则不拉伸);、3-窄边铺满(长边滚动)、4-铺满全屏。


准备工作

首先,我们需要把使用到的依赖进行安装:

npm i element-resize-detectornpm i animejsnpm i jquery

然后,在vuex中定义以下变量和方法:

 state: {mode: 1, //1-居中留白(按比例伸缩); 2-居中留白(若不超出屏则不拉伸); 3-窄边铺满(长边滚动); 4-铺满全屏exw: 40,left: 0,top: 0,orderWork: {},warn: {},fontSize: 30,},
mutations: {increment(state, fs) {state.fontSize = fs;},exMode(state, mode) {state.mode = mode;},addExW(state, exw) {state.exw = exw;},addLeft(state, left) {state.left = left;},addTop(state, top) {state.top = top;},},

最后,需要在main.js中定义我们需要用到的全局方法:

// 以下为vue3的写法
import ElementResizeDetectorMaker from "element-resize-detector";
import anime from "animejs";
import jquery from "jquery";const app = createApp(App);app.config.globalProperties.$erd = ElementResizeDetectorMaker();
app.config.globalProperties.$anime = anime;
app.config.globalProperties.$jquery = jquery;app.use(store).use(router).use(ElementPlus).mount("#app");// 以下为vue2的写法
import Vue from 'vue'
import ElementResizeDetectorMaker from "element-resize-detector";
import anime from "animejs";
import jquery from "jquery";Vue.prototype.$erd = ElementResizeDetectorMaker();
Vue.prototype.$anime = anime;
Vue.prototype.$jquery = $jquery;

实现

在App.vue中书写以下代码:

<template><div id="app" :style="{ padding: pad }" class="hidden"><div ref="appBox" class="app-box" :style="{ width: tw, height: th }"><router-view /></div></div>
</template>
<script>
export default {data() {return {pad: "0",w: 4160,h: 1248,fs: 30, //基本字体大小tw: "100%",th: "100%",speed: 2,ani: null,};},created() {},computed: {mode() {return this.$store.state.mode;},},watch: {mode() {this.$jquery(this.$refs.appBox).css("transform", "none");this.calc();},},mounted() {this.calc();this.$nextTick(() => {document.addEventListener("keydown", (e) => this.turnMode(e), true);this.$erd.listenTo(document.querySelector("html"), () => {this.$jquery(this.$refs.appBox).css("transform", "none");this.calc();});this.$store.commit("addExW", this.$jquery(this.$refs.ex).outerWidth());});},methods: {calc: function () {let fs = this.fs;let html = document.querySelector("html");let sc = this.w / this.h;let ww = parseFloat(document.defaultView.getComputedStyle(html, null).width);let wh = parseFloat(document.defaultView.getComputedStyle(html, null).height);if (this.mode <= 2) {let isEnough = this.h <= wh && this.w <= ww && this.mode == 2;if (isEnough) {this.pad = wh / 2 - this.h / 2 + "px " + (ww / 2 - this.w / 2) + "px";} else {if (sc < ww / wh) {this.pad = "0 " + (ww / 2 - (wh * sc) / 2) + "px";fs = (wh * fs) / this.h;} else {this.pad = wh / 2 - ww / sc / 2 + "px 0";fs = (ww * fs) / this.w;}}this.tw = "100%";this.th = "100%";this.$store.commit("addLeft",isEnough? ww / 2 - this.w / 2: sc < ww / wh? ww / 2 - (wh * sc) / 2: 0);this.$store.commit("addTop",isEnough? wh / 2 - this.h / 2: sc < ww / wh? 0: wh / 2 - ww / sc / 2);} else if (this.mode == 3) {this.pad = "0";if (sc < ww / wh) {this.tw = ww + "px";this.th = ww / sc + "px";fs = (ww * fs) / this.w;this.$nextTick(() => {document.removeEventListener("keydown",(e) => this.trans(e, 1),true);document.addEventListener("keydown", (e) => this.trans(e, 1), true);this.mouseWheel(this.$refs.appBox,() => this.trans({ keyCode: 38 }, 1, 240),() => this.trans({ keyCode: 40 }, 1, 240));});} else {this.tw = wh * sc + "px";this.th = wh + "px";fs = (wh * fs) / this.h;this.$nextTick(() => {document.removeEventListener("keydown",(e) => this.trans(e, 0),true);document.addEventListener("keydown", (e) => this.trans(e, 0), true);this.mouseWheel(this.$refs.appBox,() => this.trans({ keyCode: 37 }, 0, 240),() => this.trans({ keyCode: 39 }, 0, 240));});}this.$store.commit("addLeft", 0);this.$store.commit("addTop", 0);} else if (this.mode == 4) {this.pad = "0";this.tw = "100%";this.th = "100%";fs = sc < ww / wh ? (wh * fs) / this.h : (ww * fs) / this.w;this.$store.commit("addLeft", 0);this.$store.commit("addTop", 0);}html.style["font-size"] = parseInt(fs) + "px";this.$store.commit("increment", fs);},trans: function (e, s, st) {let ts = s? this.$jquery(this.$refs.appBox).outerHeight(): this.$jquery(this.$refs.appBox).outerWidth();let ws = s? this.$jquery(this.$refs.appBox).parent().outerHeight(): this.$jquery(this.$refs.appBox).parent().outerWidth();let event = e || window.event;let code = event.keyCode || event.which;let of = parseFloat(this.$jquery(this.$refs.appBox).css("transform")? this.$jquery(this.$refs.appBox).css("transform").split(",")[s ? 5 : 4] || 0: 0);let step = st || 120;if (code == (s ? 38 : 37) && of < 0) {let m = of + step > 0 ? 0 : of + step;this.run(this.$refs.appBox, s, m - of);} else if (code == (s ? 40 : 39) && ts + of - ws > 0) {let m = ts + (of - step) - ws > 0 ? of - step : ws - ts;this.run(this.$refs.appBox, s, m - of);}return false;},run: function (el, s, dis) {this.$anime.remove(el);this.ani = null;let obj = {targets: el,duration: parseInt(Math.abs(dis) / this.speed),easing: "linear",};if (s) {obj.translateY = "+=" + dis;} else {obj.translateX = "+=" + dis;}this.ani = this.$anime(obj);},mouseWheel: function (ele, fn1, fn2) {function wheelDelta(ev) {// 使火狐浏览器 和标准浏览器的 滚轮数值返回一致return ev.wheelDelta ? ev.wheelDelta : ev.detail * -40;}function clack(ev) {if (wheelDelta(ev) < 0) {fn2.call(ele);} else {fn1.call(ele);}}if (navigator.userAgent.match(/Firefox/gi)) {ele.addEventListener("DOMMouseScroll", function (ev) {// 火狐浏览器ev = ev || window.event;ev.preventDefault();clack(ev);});} else {//其他浏览器 chrome ieif (ele.addEventListener) {ele.addEventListener("mousewheel",function (ev) {ev = ev || window.event;ev.returnValue ? (ev.returnValue = false) : ev.preventDefault();clack(ev);},{ passive: false });} else {ele.attachEvent("onmousewheel", function (ev) {ev = ev || window.event;if (ev.returnValue) {ev.returnValue = false;}clack(ev);});}}},turnMode: function (e) {let event = e || window.event;let code = event.keyCode || event.which;let obj = {49: 1,50: 3,};let mode = obj[code] || this.mode;this.$store.commit("exMode", mode);},exBtn: function () {let mode = this.mode == 1 ? 3 : 1;this.$store.commit("exMode", mode);},},
};
</script>
<style scoped>
.app-box {box-sizing: border-box;overflow: hidden;background-size: 100% 100%;user-select: none;background-color: darkorange;
}
</style>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #fff;background-color: #fff;width: 100vw;height: 100vh;box-sizing: border-box;font-size: 1rem;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Matlab|风光及负荷多场景随机生成与缩减

目录 1 主要内容 计算模型 场景生成与聚类方法应用 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序方法复现了《融合多场景分析的交直流混合微电网多时间尺度随机优化调度策略》3.1节基于多场景技术的随机性建模部分&#xff0c;该部分是随机优化调度的重要组成部分…

轻松掌握:工科生如何高效阅读国际期刊和撰写论文(下)

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

透明屏幕的魅力:为何它如此受欢迎

在科技日新月异的今天&#xff0c;透明屏幕技术以其独特的魅力和广泛的应用前景&#xff0c;逐渐成为了科技领域的一颗璀璨明星。从智能手机、平板电脑到大型显示屏&#xff0c;透明屏幕技术以其前所未有的视觉体验和实用性&#xff0c;赢得了广大消费者的喜爱。 一、透明屏幕的…

docker 镜像突然拉取不了,教你解决

最近我们可以发现&#xff0c;在Linux系统里拉取不了镜像了&#xff0c;翻墙也拉取不了&#xff0c;这时候我们可以有一个新的docker 镜像同步网站来解决这个问题 一、首先打开镜像官网&#xff08;需要翻墙&#xff09; https://hub.docker.com/ 然后搜索一个镜像 搜索最新…

Nginx实战:简单登录验证配置(基于openssl)

本文提供的是基于openssl创建的密码文件,对nginx指定的location访问。进行登录验证的配置方式。 1、验证页面配置 我的nginx实验环境是直接yum安装的,如果是自己编译安装的那么对应目录就是自己安装配置的目录。 先在/usr/share/nginx/html下创建一个usertest.html,里面添加…

Spring Cache常见问题解决

目录 一 报错:Null key returned for cache operation 二 报错&#xff1a;类型转换异常 三 取出的数据为null 一 报错:Null key returned for cache operation 这里报错有两种情况&#xff1a; 第一&#xff0c;如果你在新增的方法上使用Cacheable注解&#xff0c;那么肯定是…

绝望中迎来曙光,阿里大模型算法岗 Offer 突然来了!

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型技术趋势、算法项目落地经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 总结链接如…

用定时器T1中断控制两个LED以不同周期闪烁

#include<reg51.h> // 包含51单片机寄存器定义的头文件 sbit D1P2^0; //将D1位定义为P2.0引脚 sbit D2P2^1; //将D2位定义为P2.1引脚 unsigned char Countor1; //设置全局变量&#xff0c;储存定时器T1中断次数 unsigned char Countor2; //设置全局变量&#xff0c;储…

virutalBox安装debian并配置docker环境

下载镜像 https://gemmei.ftp.acc.umu.se/debian-cd/current/amd64/iso-cd/debian-12.5.0-amd64-netinst.iso 虚拟机安装 如何在Virtual Box 上安装Debian系统_virtual box debian iso netinst-CSDN博客 启动命令行模式 如何设置Debian图形启动或命令行界面启动&#xff1…

什么是Cookie?有什么用?如何清除浏览器中的Cookie?

互联网上的每一次点击和每一个选择都可能被一种名为Cookie的技术记录下来。但Cookie是什么&#xff1f;我们在网站上登录时&#xff0c;为什么经常会被问及是否接受Cookie&#xff1f;接受Cookie登录会不会影响我们的在线隐私&#xff1f; Cookie是什么&#xff1f; Cookie是一…

S-Clustr(影子集群)V3 高并发,去中心化,多节点控制

S-Clustr 项目地址:https://github.com/MartinxMax/S-Clustr/releases/tag/S-Clustr-V3.0 Maptnh Не ограничивайте свои действия виртуальным миром. GitHub: Maptnh Jay Steinberg Man kann die Menschen, die man hasst, in d…

体育赛事翻译欧洲杯足球翻译术语分享

欧洲杯又称欧洲足球锦标赛&#xff0c;是世界上受欢迎和具影响力的国际体育赛事之一&#xff0c;有关足球翻译的术语分享如下&#xff1a; penalty mark (点球)罚球点,midfielder 前卫,center forward 中锋 full back 后卫,bicycle kick / overhead kick 倒钩球,chest-high ba…

如何用Vue3打造一个交互式数据统计仪表盘

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 代码相关技术博客 1. 代码应用场景介绍 本代码示例展示了一个用于展示统计数据的仪表盘界面。它适用于需要可视化跟踪和分析各种指标的应用程序&#xff0c;例如财务管理、健康监测和商业智能。 2. 代码基本…

机器学习-保存模型并根据模型进行预测 python demo

文章目录 前言机器学习-保存模型&#xff0c;根据模型进行预测python demo1. 将我们创建的线性回归模型保存到本地2. 利用我们保存的模型进行房价预测 demo2. 利用我们保存的模型生成对应的预测线性图 demo 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评…

国密SSL证书提升网络安全

随着数字化时代的到来&#xff0c;网络安全已经成为全球关注的焦点。在这种背景下&#xff0c;SSL证书作为保护数据传输安全的重要工具&#xff0c;其重要性日益凸显。 数字证书产品有以下几种类别&#xff1a; 单域名SSL证书&#xff1a;为单一网站提供安全保护。 多域名SS…

【PyTorch函数解析】einsum的用法示例

一、前言 einsum 是一个非常强大的函数&#xff0c;用于执行张量&#xff08;Tensor&#xff09;运算。它的名称来源于爱因斯坦求和约定&#xff08;Einstein summation convention&#xff09;&#xff0c;在PyTorch中&#xff0c;einsum 可以方便地进行多维数组的操作和计算…

DWC USB2.0协议学习1--产品概述

本章开始学习记录DWC_otg控制器&#xff08;新思USB2.0&#xff09;的特点、功能和应用。 新思USB 2.0 IP主要有两个文档需要参考&#xff1a; 《DesignWare Cores USB 2.0 Hi-Speed On-TheGo (OTG) Data book》 《DesignWare Cores USB 2.0 Hi-Speed On-TheGo (OTG) Progra…

解决IMX6ULL GPIO扩展板PWM7/8中的pwm0/period后卡死问题

前言 本篇文章主要是记录解决百问网论坛上面设置 IMX6ULL GPIO扩展板PWM7/8中的pwm0/period后卡死问题&#xff0c;如下图&#xff1a; 一、查看原理图&#xff0c;找出对应引脚 在这里我们如何确定哪个扩展口中的引脚输出PWM波呢&#xff1f;我们可以通过查看原理图。 查看…

作业6.20

1.已知网址www.hqyj.com截取出网址的每一个部分(要求&#xff0c;该网址不能存入文件中) 2.将配置桥接网络的过程整理成文档&#xff0c;发csdn 步骤i&#xff1a;在虚拟机设置中启用桥接模式 1. 打开VMware虚拟机软件。 2. 选择您想要配置的虚拟机&#xff0c;点击菜单栏中的“…

C++ 基础:指针和引用浅谈

指针 基本概念 在C中&#xff0c;指针是存储其他变量的内存地址的变量。 我们在程序中声明的每个变量在内存中都有一个关联的位置&#xff0c;我们称之为变量的内存地址。 如果我们的程序中有一个变量 var&#xff0c;那么&var 返回它的内存地址。 int main() {int var…