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前端上传文件给后端的两种方式
<a-uploadv-model:file-list="fileList":show-upload-list="false":multiple=" ...
plupload上传插件绑定事件的两种方法
在经受一天的磨难之后终于找到处理事件方法: 先引用: <script src="js/plupload.full.min.js" type="text/javasc ...
vue代码上传服务器后背景图片404解决方法
vue代码上传服务器后背景图片404解决方法参考文章: (1)vue代码上传服务器后背景图片404解决方法 (2)https://www.cnblogs.com/Mrrabbit/p/7830944 ...
python matplotlib在一张画布上画多个图的两种方法，plt.subplot(),plt.subplots()。
Matplotlib在一张画布上画多个图的两种方法,plt.subplot,plt.subplots. 目录回顾 plt.subplots()画法 plt.subplot()画法保存回顾之前也 ...
jq定制上传按钮，选择文件就上传
使用css隐藏type="file" 的上传按钮,然后使用js调用 html代码 <input type="button" style="mar ...
jpg格式电脑怎么弄_电脑上怎么压缩JPG图片？两种方法帮你轻松解决
我们在工作中经常会使用到各种图片,尤其做PPT时,需要大量的图片素材.为了方便保存与传输图片,首先我们要进行图片压缩,但在压缩时很容易导致图片质量受损.今天小编向大家分享两种图片压缩的方法,帮助大家在 ...
ubuntu安装python3.8_在Ubuntu 18.04系统上安装Python 3.8的两种方法
本文介绍在Ubuntu 18.04/16.04系统上安装Python 3.8的两种不同方法,第一个选择是从Deadsnakes PPA安装deb软件包,第二个选择是从源代码构建,当前Python 3. ...
php lotus notes,Linux_Ubuntu Linux Wine上使用Lotus Notes 7，两种方法：　　　A、如果data - phpStudy...
Ubuntu Linux Wine上使用Lotus Notes 7 两种方法: A.如果data目录装在d盘,wine下虚拟d盘到Windows的D盘 B.不用动原来的notes.ini,而是另外维护 ...
解决Vue3的ts报错：类型“{}”上不存在属性“xxx”，两种方法彻底根治
刚创建的一个Vue3和Ts的项目,结果使用Vscode打开后,修改了index.vue文件就报错了: 网上找了各种原因,有让添加jsconfig.json文件的,有让新建一个项目的,有的直接放弃ts的 ...
服务器怎么用u盘传文件进去_本地文件上传到linux服务器的几种方法
本文介绍几种常见的方法,把文件上传到Linux服务器中!速维网络常见有使用:scp命令.xshell软件里的xftp程序.U盘挂载.服务器自带的lrzsz程序. 一.scp使用说明: 1.把本机的文 ...

vue 定制上传按钮的样式的两种方法

vue 定制上传按钮的样式的两种方法相关推荐

最新文章

热门文章