源码如下

 

<!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>

Logo

前往低代码交流专区

更多推荐