源码如下
<!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/[email protected]/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>