vue3实现在新标签中打开指定的网址

有一个文件列表,如下图:
在这里插入图片描述

我希望点击查看按钮的时候,能够在新的标签页面打开这个文件的地址进行预览,该如何实现呢?

比如:
在这里插入图片描述

实际上要实现这个并不难,参考demo如下:
在这里插入图片描述

首先,给按钮绑定点击事件:

<a-buttonsize="small"type="primary"@click="handleView(record)">查看</a-button>

然后,实现点击方法:

const handleView = (record) => {const url = `/api/download/${record.uuid}_${record.name}`window.open(url, "_blank")
}

最终就实现了这个功能!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/48788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渗透测试——利用公网反弹shell到本地的两种方式,vmware虚拟机与主机的端口转发,本地ssh无法上线的问题解决

解决问题&#xff1a; 因长期使用本地模拟靶场&#xff0c;实战护网时并非模拟靶场&#xff0c;shell反弹需要利用公网测试。解决目标站无法反弹到本地的情况。解决本地是windows&#xff0c;虚拟机是kail、linux&#xff0c;无法相互转换流量的情况。 环境搭建 靶机 centOS7 …

VScode 批量操作

VScode 批量操作 批量修改 按住 alt/option 键&#xff0c; 选择需要批量操作的位置 如果是多行&#xff0c;则按住 altshift 键 可以直接操作 但是有时候比如变量命名&#xff0c;可能需要递增操作的命名 需要下载插件 Increment Selection 按照1的方法多选光标之后&am…

html+css+js前端作业 王者荣耀官网5个页面带js

htmlcssjs前端作业 王者荣耀官网5个页面带js 下载地址 https://download.csdn.net/download/qq_42431718/89574989 目录1 目录2 目录3 项目视频 王者荣耀5个页面&#xff08;带js&#xff09; 页面1 页面2 页面3 页面4 页面5

php接口返回的json字符串,json_decode()失败,原来是多了红点

问题&#xff1a; 调用某个接口返回的json&#xff0c;json_decode()失败&#xff0c;返回数据为null&#xff0c; echo json_last_error();返回错误码 4 经过多次调试发现&#xff1a;多出来一个红点&#xff0c;预览是看不到的。 解决&#xff1a;要去除BOM头部 $resul…

vue 搜索框

效果 创建搜索组件&#xff1a; 在Vue项目中&#xff0c;首先需要创建一个搜索组件。这个组件通常包含一个输入框和一个搜索按钮。使用v-model指令将输入框与组件的数据属性&#xff08;如searchKeyword&#xff09;进行双向绑定&#xff0c;以便获取用户输入的关键词。处理搜索…

Linux网络:传输层协议TCP(二)三次挥手四次握手详解

目录 一、TCP的连接管理机制 1.1三次握手 1.2四次挥手 二、理解 TIME_WAIT 状态 2.1解决TIME_WAIT 状态引起的 bind 失败的方法 三、理解CLOSE_WAIT状态 一、TCP的连接管理机制 在正常情况下, TCP 要经过三次握手建立连接, 四次挥手断开连接 1.1三次握手 三次握手顾名思…

Docker从零开始:安装、部署到卸载,一文搞定全流程

Docker是一种开源容器化平台&#xff0c;它允许开发者将应用程序及其依赖打包成轻量级、可移植的容器。这些容器能确保软件在任何环境中稳定运行&#xff0c;无论是开发者的笔记本电脑还是生产服务器。Docker流行的原因在于其提供的隔离性、可移植性和可扩展性&#xff0c;它简…

2024年展望:人工智能领域将呈现怎样的发展趋势?

2024年&#xff0c;人工智能&#xff08;AI&#xff09;领域将继续保持强劲的发展势头&#xff0c;并呈现出多个重要的发展趋势。以下是对该领域未来发展趋势的详细展望&#xff1a; 一、技术创新与融合 多模态生成式AI的崛起&#xff1a; 多模态生成式AI系统能够处理文本、声…

C# 将字符串数组以树型结构化

例如字符串数组&#xff1a; string[] arr { "1","3-4-5-6-7", "2","3-4","3-4-5","3-4-5-6", "3", "6", "4", "6-1", "6-2", "5", "6-1-1&…

李艳波医生怎么挂号?

对于想要预约李艳波医生的患者来说&#xff0c;北京仁爱堂提供了两种便捷的预约方式&#xff1a;来院面诊和视频会诊。来院面诊是传统的就诊方式&#xff0c;患者可以直接前往仁爱堂&#xff0c;与李艳波医生面对面交流&#xff0c;详细了解自己的病情并接受专业的治疗建议。这…

解决Github Copilot无效,无法使用的问题

如果是在Copilot的终端报错 Invalid copilot token: missing token: 403 原因有三种 1&#xff0c;你的账号没有订阅正版的服务&#xff0c;解决办法是购买正版服务 2&#xff0c;你在购买服务的时候&#xff0c;Github上 billing information 地址信息和支付卡片的地址信息不…

关卡1-3:Git

关卡1-3&#xff1a;Git Git基础fork并拉取本次课程的源创建一个gitee自己的仓库 这个是internLM的3期训练营的通关笔记。 任务&#xff1a; 熟悉git熟悉使用git托管平台&#xff0c;常见有github、giteefork官方的训练营的教程项目&#xff0c;提交文件到自己的项目&#xf…

openGauss触发器详解

openGauss 是一款开源关系型数据库管理系统&#xff0c;广泛应用于企业级应用中。随着数据量的增长和业务逻辑的复杂化&#xff0c;数据库管理和操作的自动化需求越来越高。触发器&#xff08;Triggers&#xff09;作为数据库中重要的编程工具&#xff0c;能够极大地简化复杂操…

【python】OpenCV—Point Polygon Test

文章目录 1、完整代码2、涉及到的库cv2.pointPolygonTestcv2.minMaxLoc 1、完整代码 from __future__ import print_function from __future__ import division import cv2 as cv import numpy as np # Create an image r 100 src np.zeros((4*r, 4*r), dtypenp.uint8) # 创…

前端学习3——自学习梳理

1.学习一下盒子模型(盒子就是元素&#xff0c;标签) 盒子模型又分为4种&#xff1a;块级&#xff0c;内联级&#xff0c;内联块级&#xff0c;弹性盒子 (弹性盒子续在下一节) 2.元素的结构 1.盒子模型 <!DOCTYPE html> <html lang"en"> <head>&l…

【C++杂货铺】智能指针

目录 &#x1f308; 前言&#x1f308; &#x1f4c1; 内存泄漏 &#x1f4c2; 概念 &#x1f4c2; 分类 &#x1f4c2; 如何避免 &#x1f4c1; RAII &#x1f4c1; C11智能指针 &#x1f4c2; auto_ptr &#x1f4c2; unique_ptr &#x1f4c2; shared_ptr &#x1…

电子电器架构 --- 智能汽车的大脑(域控制器)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

QT--进程

一、进程QProcess QProcess 用于启动和控制外部进程&#xff0c;管理其输入输出流。 使用方法 start()&#xff1a;启动一个新进程。setStandardInputFile()&#xff1a;将文件作为标准输入。将进程的标准输入&#xff08;stdin&#xff09;重定向到指定的文件。换句话说&am…

AV1技术学习:Constrained Directional Enhancement Filter

CDEF允许编解码器沿某些(可能是倾斜的)方向应用非线性消阶滤波器。它以88为单位进行。如下图所示&#xff0c;通过旋转和反射所示的三个模板来定义八个预设方向。 Templates of preset directions and their associated directions. The templates correspond to directions of…

MATLAB: ode45 求解常微分方程

引入 ode45 是 MATLAB 中用于求解非刚性常微分方程&#xff08;ODE&#xff09;的数值方法。它基于 Runge-Kutta 方法&#xff0c;并具有自适应步长调整机制&#xff0c;能够在一定误差控制范围内高效地计算 ODE 的数值解。 下面我们通过这个包含详细注释的代码&#xff0c;一…