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
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。