一、css的media属性（适应不同分辨率）
@media screen and (max-width:1366px){
body{background:red;}
}
上面是在浏览器宽度小于等于1366px时使用的样式
@media screen and (min-width:960px) and (max-width:1366px){
body{background:red;}
}
上面是在浏览器宽度大于等于960px且小于等于1366px时使用的样式
二、echarts图属性
1.雷达图（radar）
（1）shape：雷达图绘制类型，有'polygon' 和 'circle'。polygon是多边形，circle是圆形
（2）center：雷达图的圆心坐标位置，接受数组形式，第一项是横坐标，第二项是纵坐标，支持像素和百分比。设置成百分比时
第一项是相对于容器宽度，第二项是相对于容器高度。
center:['43%', '50%']
（3）startAngle：坐标系的起始角度，也就是第一个指示器轴的角度，number形式
startAngle: 120
（4）nameGap：指示器的名字和指示器轴的距离
2.柱状图（bar）
markLine:图表标线
silent：图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
label：标线右边的名字
symbol：改变线的箭头的样式
data：标线接受的值
3.tooltip的定位，如何使用
代码如下：
position:function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
// x坐标位置
var x =0;
// y坐标位置
var y =0;
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
这里的x是弹框距离鼠标的右距离
x = pointX +10;
这个是判断超出echarts图的宽度让弹框到鼠标左侧
if (pointX + boxWidth > (_this.formatterSize(450))) {
这里的x是让弹框到鼠标左侧，以及加一个10px的左距离
x = pointX - boxWidth -10;
}
这里的y是鼠标在弹框左右侧的位置，/4就是在四分之一处
y = pointY - boxHeight /4;
return [x, y];
}
4.stack属性
数据堆叠，将同一坐标系的不同柱状图的柱子堆叠到一起，是相加的
三、Vue的子组件改变父组件传递的值
问题描述：如图所示，当我选择分页2，再点击详情，返回时，分页还是2，但是数据却是分页1的数据
解决方案：正常来说，子组件直接修改父组件的值虽然不会报错，但是会有警告，Vue本身是不允许这种行为的，因为这样会改变Vue的设计。Vue的设计是单向数据流，数据的流动方向只能是自上往下的方向。但是有时会需要改变父组件传递的值，这时候该怎么办呢，我们就不让子组件直接修改父组件传递过来的值，而是用一个watch来监听这个值是否改变，如果改变了，让子组件告诉父组件，让父组件自己改变这个值，这样就不会报警告了，也没有改变Vue单向数据流的设计。话不多说，下面上代码。
父组件：
<Pagination :total-count="total" :back-show="false" @currentPage="currentPage" @currentChange="currentChange" />
export default {
data() {
return {
currentPage:1
}
}
methods: {
currentChange(pg) {
this.currentPage = pg.pageNum;
}
}
}
}
子组件：
<el-pagination
:current-page.sync="pageNum"
@current-change="handleCurrentChange"
/>
export default
props: {
currentPage: {
type:Number,
default:1
},
},
data() {
return {
pageNum:this.currentPage,
}
},
watch: {
currentPage(newValue,oldValue) {
if (newValue !== oldValue) {
this.pageNum = newValue;
}
}
},
methods: {
handleCurrentChange(page) {
this.pageNum = page
const pageSize =this.pageSize ?this.pageSize :10
this.$emit('currentChange', {pageNum: page, pageSize})
}
},
}
四、:auto-upload = false时，before-upload钩子函数没有用，怎么限制文件格式和不能重复上传文件
问题描述：如图1、图2所示，在选择视频上传的模块，我上传其他文件也可以上传和保存，并且还可以重复上传同一个文件
解决方案： 因为设置:auto-upload=false，需要一个before-add的钩子来在添加前看文件是否重复和格式是否正确，然而element-ui没有提供before-add的钩子。但这个问题看element-ui的源码就可以知道怎么解决，el-upload里面的file是包装过的，如果是要添加的文件，file.status会被设为ready，而上传时会被设为uploading，上传成功会被设为success，上传失败会被设置为fail。而on-change钩子的描述是“文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用”，看到这里包括了“添加文件”，但不包含“删除文件”，所以你可以这么做：绑定on-change函数，在函数内判断传入的file.status是否为ready来判断是不是添加文件，因为从以上描述可知“on-change发现file.status==='ready'”到“on-change是准备添加文件”至少是单射。
代码如下：
upload组件:
<el-upload
ref="picture"
multiple
accept="image/gif,image/jpeg,image/jpg,image/png"
action="#"
list-type="text"
//上传的文件列表
:file-list="fileList"
// 是否在选取文件后立即上传，有此属性，before-upload钩子函数不起作用
:auto-upload="false"
// 文件状态改变时的钩子
:on-change="handleVideoChange"
>
<el-button class="el-icon-video-camera">选择视频
<span style="font-size:12px;margin-left:5px;color:red">(注：格式mp4，点击文件名可预览)
</el-upload>
javascript:
export default {
data() {
return{
replace:true,
msgPromise:Promise.resolve(),
fileList: []
}
},
methods: {
handleChange(file, fileList) {
if(file.status ==='ready') {
let myFile = file.raw;
const type = myFile.type.toLowerCase();
const isJPG = type ==='image/jpeg' || type ==='image/jpg' || type ==='image/png' || type ==='image/gif'
if(!isJPG) {
fileList.pop();
this.handleMsg('上传图片只能是 jpeg、jpg、png、gif格式!', 'error');
return;
}
// 去掉有相同name的file
fileList = fileList.reduce(function (item, next) {
fileList[next.name] ?'' : fileList[next.name] =true && item.push(next);
return item;
}, []);
// 把fileLIst给到this.fileList
this.fileList = fileList;
}
},
// 提示类型
handleMsg(message, type='info') {
const duration =1500
this.msgPromise =this.msgPromise.then(() => {
this.$message({message,type,duration});
});
}
}
五、如果没有auto-upload = false，就可以用before-upload钩子函数限制格式
跟上面一个问题
给upload组件一个:before-upload = "beforeAvatarUpload"
钩子函数代码如下：
beforeAvatarUpload(file) {
let testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg ==='jpeg'
const extension2 = testmsg ==='jpg'
const extension3 = testmsg ==='png'
const extension4 = testmsg ==='gif'
if(!extension && !extension2 && !extension3 && !extension4) {
this.$message({
message:'上传图片只能是 jpeg、jpg、png、gif格式!',
type:'warning'
});
}
return extension || extension2 || extension3 || extension4
}
