乐陵开发网站时,您如何选择合适的软件开发方法?
摘要:乐陵网站开发,软件开发的三种基本方法,注册 网站开发 公司,交互设计包含网站设计前端封装el-upload组件,父组件传值dialogVisible(用于显示el-dialog&a
乐陵网站开发,软件开发的三种基本方法,注册 网站开发 公司,交互设计包含网站设计前端封装el-upload组件#xff0c;父组件传值dialogVisible#xff08;用于显示el-dialog#xff09;#xff0c;子组件接收#xff0c;并且关闭的时候返回一个值#xff08;用于隐藏el-dialog#xff09;,最多上传五个文件#xff0c;文件格式为.jpg\pdf\png
tem…前端封装el-upload组件父组件传值dialogVisible用于显示el-dialog子组件接收并且关闭的时候返回一个值用于隐藏el-dialog,最多上传五个文件文件格式为.jpg\pdf\png
templatedivel-dialog width30% :visible.syncdialogShow append-to-body closehandleCancle title上传发票 classuploadDialog!-- list-typepicture --el-uploadrefupload:auto-uploadfalse:http-requestuploadFile:on-changechangeFileLength:limit5:on-exceedhandleExceedactionaccept.pdf,.jpg,.png multiplei classel-icon-upload/idiv classel-upload__text点击上传文件/div/el-upload!-- 上传时点击的按钮 --el-button clickupload typesuccess上传文件/el-button/el-dialog/div
/template
script
import { upload } from /api/invoice/invoiceManagement;export default {name: uploadCT,props:{dialogVisible:{type:Boolean,default:false,require:true,}},watch: {dialogVisible: {handler(val) {this.dialogShow val},deep: true, // 深度监听immediate: true, // 初次监听即执行 },},data(){return{// 上传文件的列表uploadFiles: [],// 上传文件的个数filesLength: 0,// 上传需要附带的信息info:{id:,name:,},//显示dialogShow:this.dialogVisible,}},methods:{//超出限制提示handleExceed(files, fileList) {this.$message.warning(当前限制选择 5 个文件本次选择了 ${files.length} 个文件共选择了 ${files.length fileList.length} 个文件);},//关闭handleCancle(){this.uploadFiles [];// 上传文件的个数this.filesLength 0;this.dialogShow false;this.$emit(closeUploadDialog,this.dialogShow);this.$refs.upload.clearFiles();},// 修改当前文件列表长度changeFileLength(file, fileList){this.filesLength fileList.length},// 用户点击上传调用async upload(){// 触发上传 调用配置 :http-requestuploadFile// 即触发 uploadFile函数await this.$refs.upload.submit();// 上传完成后执行的操作 ...this.$modal.msgSuccess(上传成功);},// 该函数还是会被调用多次// 每次param参数传入一个文件uploadFile(param){console.log(参数,param);// 将文件加入需要上传的文件列表this.uploadFiles.push(param.file)// 当uploadFiles长度等于用户需要上传的文件数时进行上传if (this.uploadFiles.length this.filesLength){// 创建FormData上传let fd new FormData()// 将全部文件添加至FormData中this.uploadFiles.forEach
