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

源码如下

<!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+elementUI 照片墙图片的删除按钮动态显隐相关推荐

Vue + element-ui 背景图片设置
Vue + element-ui 背景图片设置初学vue 看到其他网址都有些背景图片,于是试着自己也写了一下,表述不好请见谅实现效果以下是如何实现: 找到你想要设置背景图片的页面 data里设置 ...
uniapp动态显隐导航栏图标
uniapp动态显隐导航栏图标实现思路: 将图标的宽度设置为0,就可以将图标隐藏上代码: var pageView= this.$mp.page.$getAppWebview(); if(&quo ...
nodejs+vue+elementui摄影作品图片展示交流网站express
前端技术:nodejs+vue+elementui 前端:HTML5,CSS3.JavaScript.VUE 下面我们讲解 1. node_modules文件夹(有npn install产生) ...
html图片右上角删除按钮,图片右上角删除
# 图示 ![mark](http://qiniu.newthink.cc/blog/180921/Cgl5AKF1mi.png) # GIT 地址:https://gitee.com/hongwei ...
Vue+ElementUI实现两级、可动态扩展表头的表格
最近在搞前端开发,遇到个需求,要实现下面这样的列表: 点击某行的修改按钮,该行数据可编辑,并且按钮会随之变化: 点击删除,弹出确认弹框,点确认删除该行数据. 需求描述: 其中计划数量是要支持动态变化的 ...
解决vue + elementUI 渲染图片问题
如果直接这么渲染那么他出来的只是路径而已有人肯定会说了我可以 v-for循环数组啊艹,竟然出这种骚画面······························· 最佳解决方法 < ...
vue + element-UI 实现图片嵌在表单里，图片和表单一起上传
⭐️个人博客:caohongyuan.com,更多分享,欢迎浏览!⭐️ 如下图,需求要实现点击一个按钮,可以让表单的内容和图片一起上传,只请求后台一次! 思路: 1.让图片formData放在表单fo ...
element ui背景图_vue项目elementUi照片墙图片预览
背景:后端返回的数据是个图片的url的数组,但是这个url是无法直接作为图片预览的,需要每次去调接口获取真正的url 一.template页面 id="selectfiles" : ...
vue+elementUI 实现图片上传预览功能
准备工作:你需要一个后台接口,你传文件给他,他返回一个图片在线链接.ok,开干! 用到的是elmentUI里的el-upload,先去看官网例子.我用到的是图片列表先把html的框架copy过来,然 ...

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

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

最新文章

热门文章