技术标签： 前端 vue.js javascript CSS样式
目录
vue工程可视化大屏 自适应问题
可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。
概述：按照设计稿的尺寸，将px按比例计算转为vw和vh
优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦
概述：也是目前效果最好的一个方案
优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配.
缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题
概述：这名字一听就麻烦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等
优点：布局的自适应代码量少，适配简单
缺点：留白，有时图表需要单独适配字体
npm i autofit.js
引入
import autofit from 'autofit.js'
快速开始
autofit.init()
默认参数为1920*929（即去掉浏览器头的1080）, 直接在大屏启动时调用即可
使用
// App.vue 需要在renderDom挂载到dom之后，才可以生效
export default {
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom:"#app",
resize: true
})
},
}
以上使用的是默认参数，可根据实际情况调整，参数分别为
renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器
designWidth（可选）：设计稿的宽度，默认是 1920
designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
resize（可选）：是否监听resize事件，默认是 true
文章浏览阅读436次，点赞15次，收藏2次。原因或许是，使用autofocus时，确实聚焦了！但是当我们又点击 显示弹出框的按钮时，input又失焦了，所以当我们看到input框时，没有自动聚焦。_vue3 el-input 自动聚焦autofocus无效
文章浏览阅读222次。《《说课稿LINUX》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《说课稿LINUX》PPT课件.ppt(16页珍藏版)》请在装配图网上搜索。1、LINUX 基础应用与配置管理 桂林山水职业学院计算机系 朱笑雷 主要内容 课程定位 1 课程内容设置 2 教学方法与手段 3 教材建设 4 教学团度 5 主要内容 实践条件 6 课程考核 7 教学效果 8 课程特色 9 建设思路 10 一、课..._linux说课课件
文章浏览阅读2.2k次。#在SpringBoot中启动时关于连接数据库失败的问题对照了application.yml，发现配置文件貌似没什么问题，但是在查找信息之后，发现问题正是出现在application.yml中问题出于datasource下的data-username和data-password只要将data-username和data-password改为username和password即可..._springboot启动时数据库连接失败 不关闭
文章浏览阅读4.6k次。一般情况下登录系统后菜单是由后端返回的，不是前端写死的。antd-pro也支持，修改的路径在app.tsx在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了，说明配置生效了，接下来就可以围绕这个配置做文章了，我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理，判断菜单里要展示哪些内容（比如替换字段，隐藏不显示的菜单，隐藏按钮等），处理好了后返回一个数组结构即可。示例代码如下export const layout: _antdpro的菜单
文章浏览阅读77次。为什么80%的码农都做不了架构师？>>> ..._jprofiler6 key
文章浏览阅读170次。（可以看出递归算法更加侧重于计算的技巧，并且计算机计算的次数也相对更少）；_c语言程序设计第四版课后题答案苏小红第七章
文章浏览阅读4.4w次，点赞8次，收藏51次。浏览器抓包（工具：fiddler）并 修改请求内容 工具下载：https://pan.baidu.com/s/1pyKdAwgTdNNvoWA2bGlk9A 1、正常打开网页，输入要提交的内容 2、打开工具，f11暂停了页面的所有提交动作 3、这时再点击提交按钮，请求的数据就会被工具拦截 4、双击截取的数据，右侧会看到请求的具体内容，任意修改数据 5、点击绿色按钮 run ..._filder改数据包
文章浏览阅读560次。如果您想在计算机或任何其他设备上播放高质量的视频，高清视频转换器可以帮助确保您的视频与您的操作系统和硬件兼容。您还可以使用高清转换器更改视频的分辨率，无论您是想提高质量还是降低分辨率以生成更小的文件。在下表中，我们描述了用于转换高清视频的最流行和可用的桌面程序和在线服务。它们各有优缺点，因此请根据您的需要进行选择。_奇客视频转换
文章浏览阅读1.9k次。欢迎来到unity学习、unity培训、unity企业培训教育专区，这里有很多U3D资源、U3D培训视频，我们致力于打造业内unity3d培训、学习第一品牌。今天开始做我们的游戏了，组长给分配了任务，我负责做剧情动画，人物血条和种植植物。 一、剧情动画 动画是以多个图片的形式展现的，图片是自己制作的。 private GUITextu_游戏血条动图
文章浏览阅读1k次。*******字符编码ASCII,GB2312,GBK,Unicode,UTF-8比较参考：https://blog.csdn.net/softwarenb/article/details/51994943**环境变量的加载顺序：Mac系统的环境变量，加载顺序为：a. /etc/profileb. /etc/pathsc. ~/.bash_profiled. ~/..._环境变量的顺序
文章浏览阅读316次。▼大型年度AI人物评选——2017中国AI英雄风云榜已于12月4日在乌镇张榜，12月18日在北京国贸三期举行颁奖典礼。榜单评选出年度技术创新人物TOP 10；商业创新人物TOP 10，获取完整榜单请关注网易智能公众号（ID：smartman163），回复关键词“评奖”。本文系网易智能工作室出品聚焦AI，读懂下一个大时代【网易智能讯12月10日消息】不只有你会_人类大脑植入代码
文章浏览阅读3.6k次。几经研究， 终于实现了。time[2020-06-04 11:43:36](?<=\[)(.*)(?=])(pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。 (?:pattern) 匹配 pattern 但不获取匹配结..._正则<>里内容