vue实现点击按钮下载文件功能


Posted in Javascript onOctober 11, 2019

vue实现点击按钮下载文件功能

项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码.

<div class="btns">
 	<el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button>
  <el-link target="_blank" :href="item.sourceUrl | filterUrl" :underline="false" style="margin-left:15px">
    <el-button size="mini" type="warning">软件下载</el-button>
  </el-link>
</div>

在el-button的外面套了一层el-link,如下图,可以正常下载

vue实现点击按钮下载文件功能

以下是el-link文字链接的属性

vue实现点击按钮下载文件功能

总结

以上所述是小编给大家介绍的vue实现点击按钮下载文件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 #Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 #Javascript
JsonProperty 的使用方法详解
Oct 11 #Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 #Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 #Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 #Javascript
vue控制多行文字展开收起的实现示例
Oct 11 #Javascript
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Python内建模块struct实例详解
2018/02/02 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python 实现try重新执行
2019/12/21 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
COSETTE官网:奢华,每天
2020/03/22 全球购物
Java基础面试题
2012/11/02 面试题
服务理念标语
2014/06/18 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
使用CSS设置滚动条样式
2022/01/18 HTML / CSS