选择文件的通用组件vue开发

客官°小女子只卖身不卖艺 2021-07-25 13:58 451阅读 0赞

这一周进行了一个选择文件的通用组件的开发，用vue开发的。第一次开发，虽然最后做出来了，但是过程很艰难。不过重在积累。

#### v-model的使用 ####

`v-mode`只能适用于input textarea select 等组件上，像div是不能使用的。

#### select的disabled ####

<el-select v-model="value" placeholder="请选择" :disabled="isSelect">
        <el-option v-for="(item,index) in options" :key="key" :label="item.value" :value="item.id">
        </el-option>
    </el-select>

v-model:对应的是选中的内容  
placeholder:对应的是默认的提示文字  
disabled:是否禁用，如果为true则不可选择，如果为false,则可以选择  
option是select中的选项，label是选项显示的内容，value是选项对应的值，一般用于往后台进行传值

#### PC端hover效果的实现 ####

hover可以通过@mouseenter @mouseleave两个事件监听来实现

v-if:判断是否显示，如果item.suffix=mp4,则显示img，否则显示el-image.  
el-image:添加上lazy，就可以实现懒加载  
fit:图片的样式：分为cover container等  
alt:如果图片加载不出来，则展示的内容  
element-ui中，如果el-image加载失败，则可以通过slot="error"的插槽，来实现显示的内容。

mouseover(index) { //移进显示
        this.showDetail = true;
        this.hoverIndex = index;
        // console.log(this.fileLists[index]);
    },
    mouseLeave() { //移出不显示
         this.showDetail = false;
         this.hoverIndex = null;
    },

#### pagination分页组件的使用 ####

<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total" :page-count="pages">
    </el-pagination>

el-pagination是element-ui中的组件  
background:是否为分页按钮添加背景颜色  
page-size:每页显示的条目个数  
total:总条目数  
page-count:总页数，total和page-count设置任意一个就可以达到显示页码的功能，如果要支持page-sies的更改，则需要使用total属性。  
current-page:当前页数，支持.sync修饰符，所以书写为:current-page.sync=“currentPage”  
layout:组件布局，子组件名用逗号分隔  
事件：  
current-change:当currentPage改变时会触发，即切换当前页码时触发

handleCurrentChange: function (currentPage) { 
      this.currentPage = currentPage;
      this.search();
      this.checkImageChecked(this.chooseList, this.fileLists);
    },

#### 自定义弹窗后，遮罩层后面禁止页面滚动 ####

可以考虑通过在组件创建之前给body添加class的方式

beforeCreate() { 
       document.getElementsByTagName("body")[0].className = "equipment-body";
    },
    beforeDestroy() { 
      document.body.removeAttribute("class", "equipment-body");
      console.log(this.chooseList);
    },

css样式如下:

//通过overflow:hidden;进行滚动的禁用
    .equipment-body { 
       overflow: hidden;
    }
    //隐藏页面的滚动条，为了美观
    ::-webkit-scrollbar { 
        display: none;
    }

给元素添加样式：元素.className=“样式名称”，或者是  
元素.addAttribute(‘class’,‘样式名称’);  
给元素移除样式：元素.removeAttribute(‘class’,‘样式名称’);  
在vue组件中获取body的两种方式:  
document.body或document.getElementsByTagName(‘body’)\[0\]

#### loading组件的使用 ####

因为之前在main.js中完整引入了elementui所以此处可以通过$loading的方式进行调用。

//引入element
    import Element from 'element-ui'
    //使用use
    Vue.use(Element, { 
    //size:设置element-ui的默认大小
      size: Cookies.get('size') || 'small' // set element-ui default size
    })

element-ui官方文档中写到：  
如果完整引入了Element，那么Vue.prototype上会有一个全局的方法`$loading`,它的调用方式为:`this.$loading(options)`,同样会返回一个loading实例。

const loading = this.$loading({ 
        lock: true,//lock的修改符--默认是false
        text: '加载中',//显示在加载图标下方的加载文案
        spinner: 'el-icon-loading',//自定义加载图标类名
        background: 'rgba(255, 255, 255, 0.7)',//遮罩层颜色
    });

target:loading需要覆盖的DOM节点，可传入一个DOM对象或者字符串，若传入字符串，则会将其作为参数传入document.querySelector以获取到对应的DOM节点，默认值为document.body,也就是整个html页面。  
body:同v-loading指令中的body修饰符  
fullscreen:同v-loading指令中的fullscreen修饰符  
lock:同v-loading指令中的lock修饰符  
text:显示在加载图标下方的加载文案  
spinner:自定义加载图标类名  
background:遮罩背景色  
customClass:loading的自定义类名

关闭加载组件，可以通过 loading.close()的方式来关闭，此时的loading是加载组件的自定义名称。

#### 对象对象转化为对象数组 ####

var obj = { 
    	1:'张三',
    	2:'李四'
    }
    转化为:
    var arr = [
    	{ 
    		id:1,
    		name:'张三'
    	},
    	{ 
    		id:2,
    		name:'李四'
    	}
    ]

var arr = [];
    for (let i in object) { 
        var obj = { };
        obj['id'] = i;
        obj['value'] = object[i];
        arr.push(obj); //属性
    }
    console.log(arr);

注意：  
for in 一般是用于遍历对象的属性；  
作用于对象的for in 除了会遍历数组元素外，还会遍历自定义可枚举的属性，以及原型链上可枚举的属性。  
作用于数组的for in的遍历结果是数组的索引，且都为字符串型，不能用于运算。  
也就是说，对象的for in 遍历的结果其实是 key

Object.keys()遍历的结果为由对象自身可枚举的属性组成的数组，数组中的属性名排列顺序与使用for in循环遍历该对象时返回的顺序一致。与for in区别在于不能遍历出原型链上的属性。

参考链接：  
[for in 与 Object.keys()的用法][for in _ Object.keys]

#### 父组件往子组件传值使用props ####

在子组件中的props接收父组件传递过来的参数，需要使用对象的结构

props:{ 
    	num:{ 
    		type:Number,
    		default:null
    	}
    }

#### watch监听的使用 ####

watch: { 
       fileLists: { 
           handler: function (newVal) { 
               this.checkImageChecked(this.chooseList, this.fileLists);
           },
           deep: true    //深度监听
       },
       chooseList: { 
           handler(newValue) { 
               if (newValue.length >= this.num) { 
                   // 操作
                   this.selectfile = false;
                   this.$message({ 
                       message: "当前最多选择" + this.num + "个文件",
                       type: 'warning'
                   });
               } else { 
                   this.selectfile = true;
               }
           }
       }
    }

#### 对象更新属性值的方法 ####

可以使用Object.assign(老对象，新对象);  
`Object.assign`方法的第一个参数是目标对象，后面的参数都是源对象。

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。  
`Object.assign(this.fileLists[index], { "active": false })`

#### 两个数组比对，如果有相同的Id,则后者移除此项 ####

for (var i = 0; i < this.fileLists.length; i++) { 
       for (var j = 0; j < this.chooseList.length; j++) { 
           if (this.chooseList[j]['id'] == this.fileLists[i]['id']) { 
               // this.chooseList[j]["active"] = false;
               this.chooseList.splice(j, 1);
           }
       }
    }

#### 判断数组中是否含有某一项 ####

`this.chooseList.indexOf(this.fileLists[index]) < 0 ? this.chooseList.push(this.fileLists[index]) : null;`

#### 调用封装好的request请求 ####

//提前引入 file 文件，此文件中有对应的getFileList接口
    export function getFileList(params) { 
      // console.log("data", data)
      return request({ 
        url: '/api/file?' + params,
        method: 'get'
        // data
      })
    }
    export default {  getFileList, …… }
    
    //以下代码为引入的部分，跟以上代码不在同一个文件下
    file.getFileList("fileName=" + fileName + "&fileType=" + fileType + "&page=" + page + "&size=" + size).then(res => { 
         Filesloading.close();
         console.log(res.content);
         this.fileLists = res.content;
         for (var i = 0; i < this.fileLists.length; i++) { 
             this.fileLists[i]["active"] = false;
         }
         // console.log(this.fileLists);
     });

#### 将系统时间戳转化为年月日时分秒标准格式 ####

//时间戳转化为标准格式
    changeTime() { 
        var t = new Date(this.createTime);
        var year = t.getFullYear()
        var month = (t.getMonth() + 1)
        month = this.checkAddZone(month)
        var date = t.getDate()
        date = this.checkAddZone(date)
        var hour = t.getHours()
        hour = this.checkAddZone(hour)
        var min = t.getMinutes()
        min = this.checkAddZone(min)
        var se = t.getSeconds()
        se = this.checkAddZone(se)
        this.datatime = year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + se
    },
    //不够两位的前面补0
    checkAddZone(num) { 
        return num < 10 ? '0' + num.toString() : num
    }

#### upload 组件的使用 ####

<el-upload class="upload-demo" :action="action" :on-preview="handlePreview" :on-remove="handleRemove"
                :headers="headers" :list-type="listType" :with-credentials="true" :auto-upload="true"
                :on-success="onSuccess" :before-upload="beforeUpload" :limit="filesLimit" multiple>
        <el-button size="small" type="primary">{ { doUploadBtnName}}</el-button>
        <div slot="tip" class="el-upload__tip">{ { tips}}</div>
    </el-upload>

action:必选参数，上传的地址  
headers:设置请求的头部  
multiple:是否支持多选文件  
data:上传时附带的额外参数  
name:上传的文件字段名  
with-credentials:支持发送cookie凭证信息  
show-file-list:是否显示已上传文件列表  
drag:是否启用拖拽上传  
accept:接受上传的文件类型  
on-preview:点击已上传的文件链接时的钩子，可以通过file.response拿到服务端返回的数据  
on-remove:文件列表移除文件时的钩子  
on-success:文件上传成功时的钩子  
on-error:文件上传失败时的钩子  
on-progress:文件上传时的钩子  
on-change:文件状态改变时的钩子，添加文件/上传成功和上传失败时都会被调用  
before-upload:上传文件之前的钩子，参数为上传的文件，若返回false或者返回promise且被reject，则停止上传  
before-remove:删除文件之前的钩子，参数为上传的文件和文件列表，若返回false或者返回promise且被reject，则停止上传  
list-type:文件列表的类型  
auto-upload:是否在选取文件后立即进行上传  
file-list:上传的文件列表  
http-request:覆盖默认的上传行为，可以自定义上传的实现  
disabled:是否禁用  
limit:最大允许上传的个数  
on-exceed:文件超出个数限制时的钩子

`action() { return this.$store.getters.baseUploadFile },`  
此通用组件中action是取的store中的值  
`headers: { "Authorization": getToken() },`  
headers:需要传递的是token，所以通过getToken()的方式进行获取token的值

[for in _ Object.keys]: https://www.cnblogs.com/nerrol/p/8137065.html