js实现点击复制链接功能

像这种复制链接的功能一般我们把他放在utils文件中.

代码如下:

// 文本复制

export function copyText(value) {

return new Promise((resolve) => {

var input = document.createElement("input"); // js创建一个input输入框

input.value = value; // 将需要复制的文本赋值到创建的input输入框中

document.body.appendChild(input); // 将输入框暂时创建到实例里面

input.select(); // 选中输入框中的内容

document.execCommand("Copy"); // 执行复制操作

document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作

resolve();

});

}

在组件中我们如何去使用:

直接引入:import { copyText } from "@/utils/utils.js";

使用button按钮也可: <MenuItem @click="copy(mouseRightItem)" >复制链接</MenuItem>

mouseRightItem----我这里传的是一个对象,本质上也是取其中的链接,直接传链接名也可.

然后在组件写一个方法即可:

// 复制链接

copy(item) {

const { value } = item;

console.log(value);

copyText(value.material_content.address).then(() => {

this.$message.success({ message: "地址复制成功" });

});

------------红色的数据就是链接地址

js实现点击复制链接功能相关推荐

vue点击复制链接功能两种方法实现
今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现第一种用原生实现 <Button type="success" @click="copyLink(ro ...
vue点击复制链接功能
需求:点击复制链接,粘贴到地址栏中跳转到相应页面原理:创建input标签,将链接值赋值给input标签,调用浏览器复制方法示例代码: <template> <div class= ...
html点击自动复制功能,html5页面如何实现点击复制的功能
html5页面如何实现点击复制的功能发布时间:2020-09-22 11:07:18 来源:亿速云阅读:136 作者:小新这篇文章主要介绍了html5页面如何实现点击复制的功能,具有一定借鉴价值 ...
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
移动端js实现点击复制到剪贴板,带提示,[真正]兼容所有浏览器,包括安卓和ios及uc.qq.微信.手机自带等浏览器. github,欢迎star: https://github.com/majian ...
记录一下微信小程序-一键复制链接功能
记录一下微信小程序-一键复制链接功能 //首先是小程wxml文件<button bindtap="copyBtn" data-id="下载链接" clas ...
js如何实现点击复制链接
研究了好久,请看一下代码: function copyUrl(){ var ele = document.getElementById("url"); ele. ...
JS简单实现点击复制链接的方法 ------亲测可用
<textarea name="text" id="text" cols="30" rows="10">&l ...
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器
查看demo 前言:在移动端上经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等,之前需求太紧急,基本上都使用了clipboard.js ,使用方法也很简 ...
小程序实现点击复制内容功能
x.wxml <view class="margin-30"><text>点击下方按钮复制链接地址并用浏览器打开</text><text ...

js实现点击复制链接功能

js实现点击复制链接功能相关推荐

最新文章

热门文章