网站推广有哪些手段,大连网站建设与维护题库,知名品牌logo标志设计解析,网站外链价格项目是用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
