Vue3 点击el-button 触发input type=“file“ 选择本地文件 并修改样式

2023-11-04

                  <el-button class="file-box" text>
                            <input type="file" multiple class="file-btn" required
                                @change="setImage"/>上传  
                        </el-button>
.file-box {
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: rgb(252, 113, 0);
    background-color: rgb(255, 255, 255);
}

.file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

这个前端页面的展示效果

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3 点击el-button 触发input type=“file“ 选择本地文件 并修改样式 的相关文章