将el-upload触发方式改为双击

 将el-upload的触发方式由单击变为双击

原理就是通过下图代码将el-upload设置成disable不可以点击

if(this.testData.photo_path) this.imgDisable = true
//但img标签没有地址时，即无内容时

 然后再通过双击事件@dbclick实现触发

resetImgUpload(){
    this.imgDisable = false;
    this.$refs.upload.$children[0].$refs.input.click();
    this.imgDisable = true;
}

 完整代码如下，该部分代码为子组件代码，自行区分。

<template>
  <div class="imgbody">
    <el-upload class="upload-demo" ref="upload" action="" :before-remove="beforeRemove" :on-change="onUploadChange" :on-exceed="handleExceed" :disabled="imgDisable">
      <img v-if="testData.photo_path" :src="testData.photo_path" class="avatar" @dblclick="resetImgUpload">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
/* eslint-disable */

export default {
  name:"imageChart",
  props:{
    testData:{
      default:function(){
        return ""
      }
    },
  },
  data () {
    return { 
      imgUrl:'',
      imgDisable:true
    }
  },
  watch:{
  },
  created() {
    if(this.$route.name == 'AddDashBorad'){
      this.imgDisable = false
    }else{
      this.imgDisable = true
    }
    if(this.testData.photo_path) this.imgDisable = true
  },
  methods:{
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    onUploadChange(file,fileList){
      fileList = [];
      const isIMAGE = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'|| file.raw.type === 'image/gif');
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      let _this = this
      reader.onload = function(e){
        _this.testData.photo_path = this.result
      }
      //  = this.imageUrl = this.imageUrl
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'|| 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片必须是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    resetImgUpload(){
      this.imgDisable = false;
      this.$refs.upload.$children[0].$refs.input.click();
      this.imgDisable = true;
    }
  },
}
</script>
<style>
  .imgbody{
    display: flex;
    overflow: hidden;
    margin-top: 1%;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 36px;
    color: #8c939d;
  }
</style>

最后

以上就是乐观草丛为你收集整理的将el-upload触发方式改为双击的全部内容，希望文章能够帮你解决将el-upload触发方式改为双击所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。