vue 实现上传按钮的样式的两种方法
更新时间:2022年12月24日 11:20:30 作者: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 上传按钮的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue v2.4中新增的$attrs及$listeners属性使用教程
这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-01-01vue demi支持sfc方式的vue2vue3通用库开发详解
这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08vue3的ref、isRef、toRef、toRefs、toRaw详细介绍
本文详细讲解了vue3的ref、isRef、toRef、toRefs、toRaw,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09vuex中this.$store.commit和this.$store.dispatch的基本用法实例
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下2023-01-01
最新评论