vue 实现上传按钮的样式的两种方法
作者：haeasringnar
这篇文章主要介绍了vue 定制上传按钮的样式的两种方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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 上传按钮的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！