将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>