1、铜通过纯html css实现
html代码
<div class="file-upload">
<div class="file-upload-text">Add 新增</div>
<input name="upfile" class="file-upload-input" id="upfile" type="file" accept="image/*">
</div>accept=”image/*” 表示这个按钮打开后会默认选择图片上传
css代码
.file-upload {
width: 60px;
height: 26px;
position: relative;
overflow: hidden;
border: 1px solid #0F996B ;
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #0F996B;
text-align: center;
line-height: 26px;
float: right;
margin: 10px 0 auto auto;
}
.file-upload-input {
background-color: transparent;
position: absolute;
width: 999px;
height: 999px;
top: -10px;
right: -10px;
cursor: pointer;
}实现后的样式
2、通过js实现
html代码
<div class="file-upload-design">
<div class="file-upload-design-icon" @click="dialog_show" name="desgin"></div>
<div class="file-upload-design-txt">请用图文记录</div>
<input type="file" name="fileToUpload" id="fileToUpload" style="display:none;" accept="image/*" @change='changeimage($event)'>
</div>methods里面的js代码
methods:{
dialog_show (e) {
$('#fileToUpload').click()
},
}css样式代码
.file-upload-design{
margin: 20px auto auto 8px;
width: 80px;
height: 80px;
position: relative;
overflow: hidden;
background-color: #EBEBEB ;
display: inline-block;
}
.file-upload-design-icon{
width: 24px;
height: 24px;
background-image: url("../../static/icon/icon-add@3x.png");
background-size: 100% 100%;
margin: 18px 28px auto auto;
}
.file-upload-design-icon:hover{
cursor: pointer;
}
.file-upload-design-txt{
margin-top: 9px;
height: 12px;
font-size: 10px;
text-align: center;
color: #AAAAAA;
}实现后的效果
到此这篇关于vue 定制上传按钮的样式的两种方法的文章就介绍到这了,更多相关vue 上传按钮的样式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
