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时 才会执行隐藏
        },
    }
     
    
    
     
  • 相关阅读:
    拓扑排序
    最短路径(Dijkstra,SPFA,Floyd)
    最小生成树(Prim)
    最长公共子序列(DP)(二种数组实现+扩展)
    HDU3068(最长回文串)
    python pip 阿里云内网安装地址
    python matplotlib画图改为可写中文
    win10 安装 basemap
    Liunx 安装basemap
    Docker 命令大全
  • 原文地址:https://www.cnblogs.com/home-/p/11580607.html
Copyright © 2011-2022 走看看