实现思路:
创建一个 元素,实现上面的样式,然后将 input 覆盖在该元素上,并将input透明度设置为0,这样就看不到input原始样式,点击元素可以实现文件上传功能。
上代码:
html:
<el-input
v-model="form.productCode"
placeholder="请输入产品sku编号"
style="width:250px"
clearable
>
<template #append>
<div class="upload-img-btn">
<input
id="upload"
type="file"
accept="image/*"
class="upload-input"
@change="uploadChange"
>
<img src="../assets/icons/saoyisao.png" class="img-scan"/>
</div>
</template>
</el-input>
css:
.upload-img-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.img-scan {
display: block;
width: 32px;
height: 32px;
}
.upload-input {
width: 32px;
height: 32px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline: medium none;
cursor: pointer;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
::v-deep .el-input-group__append {
background-color: #fff;
padding: 0 10px;
border: none;
}
::v-deep .el-input__inner {
border: none;
}
::v-deep .el-form-item__content .el-input-group {
border: 1px solid #dcdfe6;
border-radius: 5px;
}
效果图: