一、首先搭建vue，和配置element-UI组件
这个我就不多说了，前面的文章里面都有讲到
二、编写布局
安装你的需要来写布局，我这里是点击上传按钮，就会弹出新的一个弹出层页面，是运用element里面的
el-dialog 来达到效果的
效果图：
主要代码：上传按钮：<el-table-column label="操作" width="100" ><el-button size="medium" @click="dialogFormVisible = true">上传</el-button></el-table-column>弹出框：<!--弹出框开始--><el-dialog width="50%" :visible.sync="dialogFormVisible" @close ="closePictureWindow($event)"><div class="fooOne-con"><span style="margin: 10px 10px">上传图片：</span><el-uploadstyle="margin: 10px 10px"v-loading="pictureLoading":action="baseApi+ '/album/uploadPhoto?albumid=43545345345323'" //你上传图片的后端接口list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-success="handleAvatarSuccess":file-list="fileList3":on-change="onGoingPicture"ref="handle"><i class="el-icon-plus"></i></el-upload><el-button style="margin: 10px 10px" type="primary" @click="submitPhotographs">提交</el-button></div></el-dialog>
定义变量
三、编写js代码
//关闭弹出框后清除数据closePictureWindow(callback){if(!callback){this.$refs.handle.clearFiles();this.fileList3 = [];}},//图片放大handlePictureCardPreview(file) {console.log(file);},//图片移除handleRemove(file, fileList){this.imgList=fileList},//图片上传成功时handleAvatarSuccess(response, file, fileList){this.imgList=fileList;},//图片上传loadingonGoingPicture(file){if(file.status ==='ready'){this.pictureLoading = true}else if(file.status ==='success'){this.pictureLoading = false}},submitPhotographs() {this.dialogFormVisible = false},
