fgfc及junshijianchayuan总结

一、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是圆形

为polygon时是多边形

为circle时是圆形

（2）center：雷达图的圆心坐标位置，接受数组形式，第一项是横坐标，第二项是纵坐标，支持像素和百分比。设置成百分比时
第一项是相对于容器宽度，第二项是相对于容器高度。

center:['43%', '50%']

（3）startAngle：坐标系的起始角度，也就是第一个指示器轴的角度，number形式

startAngle: 120

startAngle为90时

startAngle为180时

（4）nameGap：指示器的名字和指示器轴的距离

2.柱状图（bar）

markLine:图表标线
silent：图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
label：标线右边的名字
symbol：改变线的箭头的样式
data：标线接受的值

markLine

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属性

数据堆叠，将同一坐标系的不同柱状图的柱子堆叠到一起，是相加的

stack数据堆叠

三、Vue的子组件改变父组件传递的值

图1

问题描述：如图所示，当我选择分页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

问题描述：如图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
}