zoukankan      html  css  js  c++  java
  • elementUI实现上传单张图片隐藏上传按钮

    elementUI实现上传单张图片隐藏上传按钮

    话不多说直接上代码

          <el-form-item>
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove" 图片上传事件
                    :limit="1" 
                    :on-change="handleChange" 图片上传事件
                    :class="{ hide: hideUpload }" 设置一个class表达式用于达到条件调用隐藏样式
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="ruleForm.dialogVisible">
                    <img width="100%" :src="ruleForm.headPortrait" alt="" />
                  </el-dialog>
          </el-form-item>

    <script>中
    import "../../style/uoLoad.css"; //引入外部css 用户更改样式就是隐藏样式
    
    
          data(){ //设置初始值和限制数量
            return {
              
    hideUpload:false ,
              limitCount:1
            }
          }

    事件
    methods: {
        handleRemove(file, fileList) {
          this.hideUpload = fileList.length >= this.limitCount;
        },
        handleChange(fileList) {
          this.hideUpload = fileList.length >= this.limitCount;
          this.hideUpload = true; //此时值为ture时 才会执行隐藏
        },
    }
     
    
    
     
  • 相关阅读:
    初识redis
    支付宝退款操作
    《地质灾害防治这一年2013》读书摘要
    地质灾害防治工作的经验和体会
    关于地质灾害防治的一些认识
    应急信息报送和值班工作的培训学习
    《地质灾害防治这一年2012》读书摘要
    关于开源GIS和商业GIS的讨论
    B树索引学习
    cordova 开发 ios app 简要流程
  • 原文地址:https://www.cnblogs.com/home-/p/11580607.html
Copyright © 2011-2022 走看看