vue点击复制链接功能

需求：点击复制链接，粘贴到地址栏中跳转到相应页面

原理：创建input标签，将链接值赋值给input标签，调用浏览器复制方法

示例代码：

<template>

<div class="box">

<div class="title">复制链接并在地址栏输入可跳转</div>

<p v-text="url"></p>

<el-button v-if="url" @click="CopyUrl"

>复制链接</el-button

>

</div>

</template>

<script>

export default {

data() {

return {

url: "https://www.baidu.com/",

};

},

methods: {

// 复制：获取数据，创建标签，把数据赋值给标签，选择标签对象，执行浏览器复制命令

CopyUrl(data) {

console.log(data);

var Url2 = document.getElementById("inviteCode").innerText; // 获取要复制的数据即地址

var oInput = document.createElement("input"); // 创建input标签存放地址

oInput.value = Url2; // 给input标签赋值

document.body.appendChild(oInput); // 将input标签添加到body里

oInput.select(); // 选择对象

document.execCommand("Copy"); // 执行浏览器复制命令

oInput.className = "oInput";

oInput.style.display = "none"; // 隐藏input

this.$message({

message: "复制成功!",

type: "success",

});

},

},

};

</script>

<style>

</style>

vue点击复制链接功能相关推荐

vue点击复制链接功能两种方法实现
今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现第一种用原生实现 <Button type="success" @click="copyLink(ro ...
js实现点击复制链接功能
像这种复制链接的功能一般我们把他放在utils文件中. 代码如下: // 文本复制 export function copyText(value) { return new Promise((reso ...
js实现复制并能保留原格式粘贴；vue中点击复制粘贴功能；vue复制功能（不需要插件）；
使用场景:vue项目中遇到点击按钮,复制文本的功能.复制成功后可以黏贴. <div @click="copyDesc">复制</div>methods:{c ...
html点击自动复制功能,html5页面如何实现点击复制的功能
html5页面如何实现点击复制的功能发布时间:2020-09-22 11:07:18 来源:亿速云阅读:136 作者:小新这篇文章主要介绍了html5页面如何实现点击复制的功能,具有一定借鉴价值 ...
记录一下微信小程序-一键复制链接功能
记录一下微信小程序-一键复制链接功能 //首先是小程wxml文件<button bindtap="copyBtn" data-id="下载链接" clas ...
Vue 点击复制粘贴文本
https://www.cnblogs.com/sherlock-Ace/p/10803961.html https://blog.csdn.net/weixin_42398560/article/d ...
小程序实现点击复制内容功能
x.wxml <view class="margin-30"><text>点击下方按钮复制链接地址并用浏览器打开</text><text ...
JavaScript实现点击复制的功能
需求背景有些时候我们需要实现让用户点击一个按钮就可以复制文字的功能,那么你知道要怎么去做嘛? 代码实现 <!DOCTYPE html> <html lang="en&qu ...
pc端VUE实现一键复制内容功能
接到一个需要,需要在pc端实现一键复制粘贴功能,如图所示: 当我点击复制按钮时,会提示"复制成功",这样复制的内容就可以在其他地方使用了具体实现方法如下: 我写了一个公共的方法 ...

vue点击复制链接功能

vue点击复制链接功能相关推荐

最新文章

热门文章