vue+elementUI 照片墙图片的删除按钮动态显隐

源码如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="elementUI-2.12/index.css" /></head><script src="http

温柔的风归功于带笑的你

6509人浏览 · 2020-07-02 14:30:15

温柔的风归功于带笑的你 · 2020-07-02 14:30:15 发布

源码如下

<!DOCTYPE html>
<html>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^