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

wlik

已于 2023-04-07 11:31:33 修改

阅读量5.8k

点赞数 1

文章标签： vue.js elementui javascript

于 2022-08-05 10:20:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45220510/article/details/126172494

版权

                  <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;
}

这个前端页面的展示效果