源码如下
<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="elementUI-2.12/index.css" /> </head> <script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script> <script src="elementUI-2.12/index.js"></script>
<body> <div id="photo"> <el-upload action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/" accept="image/*" :limit="3" list-type="picture-card" :on-exceed="outnum" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="uploadsuccess" :class="{hide:hideUploadEdit,hide2:hideUploadEdit2}" :disabled="false"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> <!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span>-->
</body> <script> var vm = new Vue({ el: '#photo', data() { return { dialogImageUrl: '', dialogVisible: false, hideUploadEdit:false, hideUploadEdit2:false, }; }, methods: { handleRemove(file, fileList) { // this.dialogVisible = true;
if(fileList.length >=3){ this.hideUploadEdit = true }else{ var _this = this setTimeout( _this.hideUploadEdit = false ,800) } console.log(file, fileList); }, handlePictureCardPreview(file,fileList) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, uploadsuccess(file,fileList){ if(fileList.length == 2){ this.hideUploadEdit2 =true }else if(fileList.length == 3){ this.hideUploadEdit2 =false } if(fileList.length >=3){ this.hideUploadEdit = true }else{ this.hideUploadEdit = false } }, outnum(file, fileList){ alert("最多上传3张照片") } } }) </script> <style> .hide .el-upload--picture-card { display: none; } .hide2 .el-upload-list__item-delete{ visibility: hidden; } </style> </html>
