一流的上海网站建设,免费网站建设朋友交流,外贸经常用的网站,建网站公司汽车六万公里是否累变速箱油项目是用vuewebpackelementUI 完成的。虽然没有什么深奥的技术和难点#xff0c;但是有些细节还是值得注意的。 1、满足不同屏幕尺寸下缩放全屏显示。 单单只靠宽度、高度百分比是不可以实现的#xff0c;比如如果宽度设置百分比#xff0c;当屏幕宽度比较小时#xff0c;这…项目是用vuewebpackelementUI 完成的。虽然没有什么深奥的技术和难点但是有些细节还是值得注意的。 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-styledivStyle, 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
