vue点击复制链接功能两种方法实现

今天在写需求的时候有个复制链接功能给实现下，有两种方式可实现

第一种用原生实现

<Button  type="success" @click="copyLink(row.system)" size="small" >复制链接</Button>

copyLink(val) { // 复制链接console.log(val, '复制链接')let url = val // 后台接口返回的链接地址let inputNode = document.createElement('input')  // 创建inputinputNode.value = url // 赋值给 input 值document.body.appendChild(inputNode) // 插入进去inputNode.select() // 选择对象document.execCommand('Copy') // 原生调用执行浏览器复制命令inputNode.className = 'oInput'inputNode.style.display = 'none' // 隐藏this.$message.success('复制成功')
},

第二种方法用插件去实现`vue-clipboard2`

1. 安装插件：

cnpm install vue-clipboard2 --save

2. 在main.js里面引入：

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

<Button  type="success" @click="copyLink(row.system)" size="small" >复制链接</Button>

methods: {copyLink(val) { // 复制链接  val 就是你需要复制的链接this.$copyText(val).then(e => {this.$Message.success('复制成功！')}, e => {this.$Message.error('复制失败！')})},
}

vue点击复制链接功能两种方法实现相关推荐

vue点击复制链接功能
需求:点击复制链接,粘贴到地址栏中跳转到相应页面原理:创建input标签,将链接值赋值给input标签,调用浏览器复制方法示例代码: <template> <div class= ...
selenium webdriver 使用webDriver点击ENTER建的两种方法
使用webDriver点击ENTER建的两种方法:. First: driver.findElement(By.id("idValue")).sendKeys(Keys.ENTER ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
linux实现复制文件的两种方法
分享在linux系统下拷贝文件的两种方法: 1 使用系统调用的read和write实现文件拷贝: #include <stdio.h> #include <sys/types.h&g ...
js实现点击复制链接功能
像这种复制链接的功能一般我们把他放在utils文件中. 代码如下: // 文本复制 export function copyText(value) { return new Promise((reso ...
js实现复制并能保留原格式粘贴；vue中点击复制粘贴功能；vue复制功能（不需要插件）；
使用场景:vue项目中遇到点击按钮,复制文本的功能.复制成功后可以黏贴. <div @click="copyDesc">复制</div>methods:{c ...
vue 实现导出excel或文件两种方法
第一种是后端返回二进制流,通过new Blob将二进制流转成Url,记得加上responseType: 'blob'!!! this.$api.请求接口(params).then((res) => ...
【conda】conda环境的复制移植的两种方法
1. 环境复制首先conda info --envs 查看当前有哪些环境. 执行 conda create -n [name] --clone [path] 等待完即可备注:其中 name:是新环 ...
php将长url转成短链接,php将URL长链接转换短链接的两种方法
短网址(Short URL) ,顾名思义就是在形式上比较短的网址.在Web 2.0的今天,不得不说,这是一个潮流.目前已经有许多类似服务,借助短网址您可以用简短的网址替代原来冗长的网址,让使用者可以更 ...

vue点击复制链接功能两种方法实现

今天在写需求的时候有个复制链接功能给实现下，有两种方式可实现

第一种用原生实现

第二种方法用插件去实现`vue-clipboard2`

1. 安装插件：

2. 在main.js里面引入：

vue点击复制链接功能两种方法实现相关推荐

最新文章

热门文章

vue点击复制链接功能两种方法实现

今天在写需求的时候有个复制链接功能给实现下，有两种方式可实现

第一种用原生实现

第二种方法用插件去实现vue-clipboard2

1. 安装插件：

2. 在main.js里面引入：

vue点击复制链接功能两种方法实现相关推荐

最新文章

热门文章

第二种方法用插件去实现`vue-clipboard2`