论前端开发的红颜知己-------饿了么UI

对于PC端开发的码农来看，这个组件库一定是耳熟能详了，以下总结了一下开发中常用的技巧，未来还会持续添加，期待-----

1.element.ui中的el-upload传递索引

index是外部v-for循环时的索引；
:on-success的回调函数原本有三个形参数(response,file, fileList)，使用箭头函数传递索引

<el-upload
    v-show='!item.flag'
    :action="action"
    accept="image/png,image/jpg,image/jpeg"
    :on-success='(response,file, fileList) => {imgChange_post(response,file, fileList, index)}'>
    <el-button type="primary">点击上传封面图</el-button>
</el-upload>

2.element.ui中的loading组件加载圈位置

//比如要始终将文字固定在屏幕正中间
//重新设置一个div即可 给个id方便获取下面的子类元素

<div id="createId" v-loading='loading_create' element-loading-text="创建中,请稍等"></div>

```css
#createId .el-loading-mask{
    position: fixed;
    width: 100%;
    height: 100%;
}

3.element.ui上传图片视频大小尺寸校验

图片尺寸
beforeUpload：返回false则终止上传

beforeUpload(file) {
    const isJpg = /image\/(png|jpe?g|gif)$/.test(file.type);
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isJpg) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
    }
    if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
    }
    const isSize = new Promise(function(resolve, reject){
        let width = 108;
        let height = 108;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function(){
            let valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
    }).then(()=>{
        return file;
    }, ()=>{
    this.$message.error('上传图片的尺寸建议为108*108!');
        return Promise.reject()
    });
    return isJpg && isLt1M && isSize;
},

视频尺寸

const self = this
const isLt100MB  = file.size / 1024 / 1024 < 100;
const isSize = new Promise(function(resolve, reject) {
    let _URL = window.URL || window.webkitURL;
    let videoElement = document.createElement('video')
    videoElement.addEventListener("loadedmetadata", function (_event) {
        let width = videoElement.videoWidth;
        let height = videoElement.videoHeight;
        let duration = videoElement.duration; // 视频时长
        if(!isLt100MB) self.$message.error('上传视频大小不能超过100MB！');
        if(Math.ceil(duration) <= 4) self.$message.error('上传视频时长不能少于4S!');
        let valid = width/height === 9/16 && width >= 720 && height >= 1280;
        valid ? resolve() : reject();
    });
    videoElement.src = _URL.createObjectURL(file)
}).then(() => {
    return file;
},() => {
    self.$message.error('上传视频尺寸宽高比为9:16,分辨率大于720*1280');
    return Promise.reject()
});
return isSize;

4.el-table列表循环

 <el-table 
    :data="tableData"
    @sort-change='sortChange'
    height="100%"
    border>
    <el-table-column 
        v-for="col in cols"
        :sortable='col.isSortable'
        :label="col.label" :fixed='col.isFixed' :width='col.width'>
        <template slot-scope="scope">
            <span>{{ scope.row[col.prop] | fileterEmpty}}</span>
        </template>
    </el-table-column>
</el-table>

cols:[
  {prop: 'createTime', label: '日期',width:100,isFixed:true}
]

5.el-date-picker时间选择器

设置某个日期后面的时间不给选

 <el-date-picker
    style="width:240px;margin-right: 20px;"
    v-model="dayVal"
    type="daterange"
    range-separator="-"        
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
    :picker-options='pickerOptions'
    >
</el-date-picker>

//定义在data中
pickerOptions: {
    disabledDate:function(time){
        // 选当前时间之前的时间
        return time.getTime() > (Date.now()-24*60*60*1000) 
    }
},

6.el-table插槽

当一行的一列数据收受另外一列数据的联动时

<el-table-column label="期望完成时间" width="130" :sortable='isDesigner'>
    <template slot-scope="scope">
        <span v-if='scope.row.processStatus === "已完成" || scope.row.processStatus === "已取消"' style="color: #b1b1b1;">{{ scope.row.expectTime}}</span>
        <span v-else>{{ scope.row.expectTime}}</span>
    </template> 
</el-table-column>