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-dialogDragfullscreen: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>