项目总结（3.28）

项目是用vue+webpack+elementUI 完成的。虽然没有什么深奥的技术和难点，但是有些细节还是值得注意的。

1、满足不同屏幕尺寸下缩放全屏显示。

单单只靠宽度、高度百分比是不可以实现的，比如如果宽度设置百分比，当屏幕宽度比较小时，这个标题一行显示不下，很容易出现问题。

这里用zoom 可以实现。具体代码：

 getSize() {this.width = window.innerWidth;this.height = window.innerHeight;},onResize() {this.getSize();const defWidth = 1920;const defHeight = 1080;const wZoom = +(this.width / defWidth).toFixed(3);const hZoom = +(this.height / defHeight).toFixed(3);const same = Math.abs(wZoom - hZoom) <= 0.5;if (same) {let _zoom = wZoom < hZoom ? wZoom : hZoom;if (_zoom > 1) _zoom = 1;$('.divZoom').css({zoom: _zoom})}}

2、我们常常遇到这样的情况，标签绑定样式：div-style="divStyle", divStyle在data中定义，如果divStyle 中有背景图片怎么写呢？

 　　　divStyle: {'background': `url(${ require('../link.png') }) no-repeat`,'padding-left': '80px'},

首先，${}是ES6提供的字符串拼接变量和表达式的新特性，其次用require 引入图片路径，不能直接写直接路径，否则打包后是无法找到的。

3、图表颜色渐变显示

　设置itemStyle的color为new echarts.graphic.LinearGradient()线性渐变即可. 这个API在官方文档里面都没找到, 经过测试前四个参数设置为0, 0, 1, 0可以从左到右渐变. 设置为0,0,0,1可以从上到下渐变. 第5个参数数组表示开始的颜色和结束的颜色.,以下为三个颜色堆叠图的渐变设置，柱状图可以在itemStyle 中设置。

areaStyle: {

 normal: {

    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{      offset: 0.4,      color: this.colorRgb(this.options.color[i],1)    }, {      offset: 0.8,      color: this.colorRgb(this.options.color[i],0.6)    }], false),    shadowColor: 'rgba(0, 0, 0, 0.1)',    shadowBlur: 10  }},

4、表格内容太长，超出显示...

这个问题很常见，每次都要去查，在这里算做个记录吧。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;/* 注意： 自己写的table 要加： table-layout:fixed

5、使用el-table 最底部总是有一条白线。

遇到这种情况，将下列属性改为背景色即可

.el-table::before {  background-color: red;}

6 伪元素的应用

可以实现元素激活状态前面有蓝色的边

.el {position: relative;padding-left: 25px;height: 38px;line-height: 38px;&.is-active {color: @color-primary;&::before {position: absolute;width: 3px;background: @color-primary;left: 0;content: '';height: 100%;top: 1px;}}
}

转载于:https://www.cnblogs.com/caolidan/p/8676891.html

项目总结（3.28）相关推荐

boot sprint 项目结构_京淘项目03 08.28
JSP动态web资源,打war包 ##spring boot整合JSP 创建项目 spring SpringBoot整合web资源,, 在main文件下,新建webapp文件夹,,把WEBINF目录粘 ...
Java web项目创建笔记28 之《手写线程池》
1.原理线程池核心点----复用机制 1)提前创建好固定的线程一直在运行状态----死循环实现 2)提交的线程任务缓存到一个并发队列集合中,交给正在运行的线程执行 3)正在运行的线程从队列中获取该任 ...
《Kotlin从小白到大牛》第28章：项目实战1：开发PetStore宠物商店项目
第28章项目实战1:开发PetStore宠物商店项目前面学习的Kotlin知识只有通过项目贯穿起来,才能将书本中知识变成自己的.通过项目实战读者能够了解软件开发流程,了解所学知识在实际项目中使用的 ...
python基础学习[python编程从入门到实践读书笔记(连载六)]：数据可视化项目第17章
文章目录使用API end 项目结果: 使用plotly可视化github最受欢迎的python仓库: 修改后的可视化图表: 使用API 编写独立的程序,实现对获取的数据可视化.我们使用Web AP ...
11/28 前端码农日报
前端日报栏目数据来自码农头条(前端机器人),每日分享前端.移动开发.设计.资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴.查看图文更精彩 Web 前端从入门菜鸟到实践老司机 ...
2022最新版40个前端练手项目【附视频+源码】
不管学习哪门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦, 不用多说,大家都知道学编程语言一定要做项目才行. 本次给到大家的是40个前端实战练手项目(附源码和视频讲解),希望对大家有一 ...
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学 ...
android studio引入lib,Android studio项目引入另外一个项目做为Lib
Android studio项目引入另外一个项目做为Libary 方法一:使用Android studio 导入lib项目: 注意: lib项目更改处:html 在build.gradle 文件下将 ...
7 个支持敏捷的开源项目管理工具，更好地管理项目
文章来自开源中国(微信ID:oschina2013) 如需转载请注明上述来源,其他来源无效并视为侵权. 在一项调查中,有 71% 的组织表示他们在开发过程中会用到敏捷方法. 此外,用敏捷方法管理项目比 ...
vue尚品汇商城项目-day04【29.加入购物车操作（难点）】
文章目录 29.加入购物车操作(难点) 29.1加入购物车按钮 29.2addCartSuce 29.3购物车 29.3.1 向服务器发送ajax请求,获取购物车数据 29.3.2UUID临时游客身份 ...

项目总结（3.28）

项目总结（3.28）相关推荐

最新文章

热门文章