＜el-upload＞组件禁用单击上传，改为双击上传

1、禁用单击上传 

       在<el-upload>组件中加入:disabled="imgDisable" 且imgDisable初始化为true;将组件设置为禁用状态。

2、绑定双击上传

在<el-upload>组件中增加<div>组件，在<div>组件绑定双击事件@dblclick="handleDblClick(rect.eleId)

3、双击触发上传 

 handleDblClick(eleId) {
   //双击时将禁用状态改为使用状态
   this.imgDisable = false;
   //获取上传组件触发其单击上传函数
   this.$refs['upload_'+eleId][0].$children[0].$refs.input.click();
   //最后将使用状态改为禁用状态
   this.imgDisable = true;
 }

 完整的代码如下：

<template>
  <div>
    <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    fullscreen
    :visible.sync="visible">
           <div class="filler">
            <el-upload
                :ref="`upload_`+rect.eleId"
                class="user-uploader"
                :action="actionUrl"
                :headers="headers"
                :on-change="selectChange"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false" 
                :disabled="imgDisable" 
                v-else>
                <div v-if="rect.pic" @mousewheel.prevent="rollImg(rect.eleId)" class="filler" :style="{borderRadius:rect.shape+'%',top:'-0.1%',overflow: hidden}" @dblclick="handleDblClick(rect.eleId)">
                <img :src="'/api'+rect.pic" :id="`img_`+rect.eleId" :width="rect.width" :height="rect.height" draggable class="filler1" :style="{borderRadius:rect.shape+'%',top:'-0.1%',overflow: hidden}">
                </div>
                <div class="filler box box borderCorner" :style="{top:'-0.1%',overflow: hidden,borderRadius:rect.shape+'%'}" v-else @dblclick="handleDblClick(rect.eleId)">
                <span>{{rect.eType === 2?"图片组件":"模板照片"}}</span>
                </div>
              </el-upload>
          </div>
        </VueDragResize>
      </div>
    </el-dialog>
  </div>
</template>

<script>
   export default {
     data () {
      return {
        searchForm: {
          templateid: ''
        },
        materialList: [
        ],
        showData: '',
        almId: '',
        title: '',
        isfullscreen: true,
        mouseIsIn: false,
        visible: false,
        imgDisable: true,
        rectEle: {
          'width': 200,
          'height': 200,
          'top': 10,
          'left': 10,
          'draggable': true,
          'resizable': true,
          'minw': 10,
          'minh': 10,
          'axis': 'both',
          'parentLim': true,
          'snapToGrid': false,
          'aspectRatio': false,
          // 'rotate': true,
          'rotate': 0,
          'zIndex': 1,
          'color': '#EF9A9A',
          'active': false,
          'eleId': '',
          'eType': '',
          'pic': '',
          'saturate': 100,
          'contrast': 100,
          'brightness': 100,
          'grayscale': 0,
          'text': '',
          'talign': 'left',
          'isTransparent': '1',
          'bgcolor': 'transparent',
          'fontFamily': 'STHeiti',
          'shape': '0',
          'fontSize': 14,
          'fontColor': '#000',
          'weight': 'normal',
          'titalic': 'normal',
          'tunderscore': 'none',
          'letterSpace': 0,
          'lineHeight': 10,
          'maxLength': 20,
          
        },
        materialKey: 0,
        listWidth: 0,
        listHeight: 0,
        parentW: 0,
        parentH: 0,
        actionUrl: process.env.VUE_APP_BASE_API +'/template/template/uploadimg',
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        photoWidth: 2515,
        photoHeight: 1718,
        currentEleId: '',
        templateChildList: [],
        templateId: '',
        percent: 1,
        inputForm: {
          id: '',
          name: '',
          templatetype: '',
          templateid: '',
          templateurl: '',
          width: '',
          height: '',
          remarks: ''
        }
      }
    },
    methods: {
      handleDblClick(eleId) {
        this.imgDisable = false;
        this.$refs['upload_'+eleId][0].$children[0].$refs.input.click();
        this.imgDisable = true;
      }
    }
  }
</script>