大屏分辨率适配插件v-scale-screen

前言:大屏分辨率适配繁多,目前我认为最简单且问题最少的的方案就是使用v-scale-screen插件,无需考虑单位转换,position定位也正常使用。

1. 效果

  1. 填充满屏幕的效果
    1.gif
  2. 保持宽高比的效果
    2.gif

2. 插件原理

原理是通过css transfom 实现缩放效果,利用网页宽高比动态缩放网页。同时也支持铺满全屏,宽高等比、高度等比等自适应方案。

3. 使用

  1. 安装依赖:

注:vue2请使用v-scale-screen@1.0.0版本,vue3请使用v-scale-screen@2.0.0版本


npm install v-scale-screen -save
# or
yarn add v-scale-screen
  1. 在main中引入

vue2中使用插件导入,vue3以组件导入

  • vue2
// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
  • vue3
// main.js
<v-scale-screen width="1920" height="1080"><div><v-chart>....</v-chart></div>
</v-scale-screen>
<script>
import VScaleScreen from 'v-scale-screen'
export default {components:{VScaleScreen}
}
</script>
  1. 配置项
属性说明类型默认值
width大屏宽度Number or String1920
height大屏高度Number or String1080
autoScale自适应配置,配置为 boolean 类型时,为启动或者关闭自适应,配置为对象时,若 x 为 true,x 轴产生边距,y 为 true 时,y 轴产生边距,启用 fullScreen 时此配置失效Boolean or {x:boolean,y:boolean}true
delay窗口变化防抖延迟时间Number500
fullScreen全屏自适应,启用此配置项时会存在拉伸效果,同时 autoScale 失效,非必要情况下不建议开启Booleanfalse
boxStyle修改容器样式,如居中展示时侧边背景色,符合 Vue 双向绑定 style 标准格式Objectnull
wrapperStyle修改自适应区域样式,符合 Vue 双向绑定 style 标准格式Objectnull
bodyOverflowHidden启用后body的样式会自动设置为 overflow: hiddenBooleantrue

4.官方演示地址

Vue2演示地址

Vue3演示地址

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

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

相关文章

macOS12安装 php8.1和apache

1. 安装php 8.1 macOS12不再自带php brew tap shivammathur/php 查看可安装版本 brew search php 安装指定版本 brew install php8.1 环境配置 vim ~/.zshrc export PATH"/usr/local/opt/php8.1/bin:$PATH" export PATH"/usr/local/opt/php8.1/sbin:$PAT…

[C#] 使用HttpClient请求https地址报错的解决方案

当使用HttpClient请求HTTPS地址遇到报错时&#xff0c;下面将解析并提供可能的解决方案供参考。 文章目录 异常代码无法定位错误的准确定位错误的 常见错误错误1错误2 解决问题生产环境开发环境 异常代码 首先&#xff0c;需要查看引发异常的代码部分, 无法定位错误的 以下代…

Android Compose 一:基础控件

Flutter 与 Compose 组件辣么像&#xff0c;难道是同一个google团队整的&#xff1b;也未深究&#xff0c;只是猜测。 创建项目 需要使用新版本Android studio&#xff0c;忽略步骤… 项目目录 MainActivity说明 1 系统默认页面 Preview 修饰的方法&#xff0c;只用来供开发…

VUE.JS详细的使用方法

Vue.js是一个轻量级的前端JavaScript框架&#xff0c;它用于构建用户界面和单页应用。以下是Vue.js的基本使用方法和帮助。 安装Vue.js 使用npm: npm install vue使用CDN: <script src"https://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js"></script&…

撤销 git add 操作(忽略被追踪的文件)

文章目录 引言I git rm命令来取消暂存【推荐】II 撤销特定文件的暂存状态2.1 git rese2.2 git restoresee also引言 应用场景: 修改.gitignoregitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。那么解决方法就是先…

Kruskal算法刷题笔记

理论基础&#xff1a; 例题&#xff1a; 卡码网---53&#xff1a;寻宝 题目 题目描述 在世界的某个区域&#xff0c;有一些分散的神秘岛屿&#xff0c;每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路&#xff0c;方便运输。 不同岛屿之间&#xff0c…

精选多个炫酷的数据可视化大屏(含源码),拿走就用~

末尾有链接 演示地址&#xff1a;可视化大数据展示中心 (null.fit) 可视化大数据展示模板-科技语者 (chgskj.cn)

block性能考虑和线程安全

性能考虑 频繁地创建和销毁大量的 block 可能会对性能造成影响&#xff0c;特别是当这些 block 被拷贝到堆上时。同时&#xff0c;block 捕获大量数据时也会增加内存使用。 在讨论性能考虑时&#xff0c;主要关注的是 block 的创建、拷贝到堆上以及捕获变量的成本。以下是针对…

【Java】:方法重写、动态绑定和多态

目录 一个生动形象的例子 场景设定 1. 方法重写&#xff08;Method Overriding&#xff09; 2. 动态绑定&#xff08;Dynamic Binding&#xff09; 3. 多态&#xff08;Polymorphism&#xff09; 归纳关系&#xff1a; 重写 概念 条件 重写的示例 重载与重写的区别 …

CUDA is not availabe on this machine.

assert torch.cuda.is_available(), "CUDA is not availabe on this machine." AssertionError: CUDA is not availabe on this machine. 这个错误信息表明你尝试在PyTorch中使用CUDA&#xff08;也就是NVIDIA的GPU加速&#xff09;&#xff0c;但是你的机器上似乎没…

libssh C++封装之七(File)

1 概述 libssh是一个在客户端和服务器端实现SSHv2协议的多平台C库。使用libssh,您可以远程执行程序、传输文件、使用安全透明的隧道、管理公钥等等。本文描述的对libssh客户端功能的C++封装。 libssh下载地址 3 实现 3.6 File File类型可以读写远程文件。 3.6.1 File定义 …

使用rsync+lnotify实现远程数据实时同步备份

目录 1、定时备份与实时备份区别 2、配置客户端 2.1、在客户端安装inotify-tools软件。以便提供inotifywait inotifywatch 辅助工具程序 2.2 验证&#xff1a;监控客户端/data_backup目录的变化 2.3 编写自动同步脚本 2.4 后台运行脚本 2.5 验证数据实时同步效果 1、定…

【JS面试题】call - apply - bind

推荐哔站一个老师的视频讲解&#xff0c;非常详细易懂&#xff0c;5分钟学会&#xff01;前端面试题&#xff1a;call、apply、bind的基本概念 这三个都是函数的方法&#xff0c;用来改变函数中的this指向&#xff01; 关于call的使用&#xff1a;&#xff08;3个方法类似&am…

SpringCloud:服务拆分和远程调用

程序员老茶 &#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; P   S : 点赞是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#…

使用socat做端口转发

最近买的云上mongo数据库但是数据库不支持外网访问&#xff0c;准备做iptables转发但是一直不成功&#xff0c;腾讯云官方给予的解释是受服务器内启动的docker影响 做iptables转发会冲突&#xff0c;所以只能另想办法&#xff0c;我发现使用socat做转发也很好用&#xff0c;所以…

JAVA_4

JAVA_4 一、JAVA内存总体架构二、栈的特点如下三、堆的特点如下四、方法区&#xff08;又叫静态区&#xff0c;也是堆&#xff09;特点如下五、this的本质 一、JAVA内存总体架构 多个线程里面有&#xff1a;程序计数器、虚拟机栈、本地方法栈方法区&#xff1a;运行时常量池堆…

FPGA相关论文阅读

一、Achieving 100Gbps Intrusion Prevention on a Single Server 论文名称中文翻译&#xff1a;在单台服务器上实现100Gbps吞吐量的入侵防御检测。 文章中的Mixed-1和Norm-1 二、Distributed Password Hash Computation on Commodity Heterogeneous Programmable Platforms…

【回溯 字典树(前缀树)】212. 单词搜索 II

本文涉及知识点 回溯 字典树&#xff08;前缀树&#xff09; LeetCode212. 单词搜索 II 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母顺序&#xff0c;通过 相邻的单元…

第3周 后端微服务基础架构与前端项目联调配备

第3周 后端微服务基础架构与前端项目联调配备 1. 微服务项目层次设计与Maven聚合1.1 项目层次设计1.2 父项目pom1.2.1 打包方式 1.3 创建通用 ************************************************************************************** 1. 微服务项目层次设计与Maven聚合 1.1…

电商平台遭遇DDOS、CC攻击有什么防护方案

电商平台遭遇DDOS、CC攻击有什么防护方案&#xff1f;在数字化浪潮的推动下&#xff0c;电商平台已成为现代商业的重要组成部分&#xff0c;为消费者提供便捷、多样的购物体验。然而&#xff0c;随着业务的发展&#xff0c;电商平台也面临着日益严峻的网络安全挑战&#xff0c;…