vue2写法vue vue-clipboard2(vue复制功能)
1.安装：
npm install --save vue-clipboard2
2在main.js中引入
2 import VueClipboard from 'vue-clipboard2'; 2 Vue.use(VueClipboard);
代码如下
<div id="app">
</div>
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button" @click="doCopy">Copy!</button>
</div>
</template>
<script>
new Vue({ el: '#app', template: '#t',
data: function () { return { message: 'Copy These Text' } },
methods: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) },
function (e) { alert('Can not copy') console.log(e) }) } } })
</script>
vue3写法
法一、
在 Vue 3 中实现复制功能，可以使用
navigator.clipboard.writeText 方法来将文本复制到剪贴板
<template>
<button @click="copyToClipboard('您的合同链接地址')">复制链接</button>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({ methods: { async copyToClipboard(text) { try { await navigator.clipboard.writeText(text);
console.log('链接已复制到剪贴板'); } catch (err) { console.error('复制失败:', err); } } } }); </script>
在上面的示例中，当用户点击按钮时，会调用copyToClipboard方法，并将指定的文本（这里是"您的合同链接地址"）复制到剪贴板中。如果复制成功，控制台会输出"链接已复制到剪贴板"，否则会输出复制失败的错误信息。
请确保您的浏览器支持navigator.clipboard.writeText方法，并在 Vue 3 组件中按照上述方式使用该方法来实现复制功能。
法二、
vue 3 的复制功能 vue-clipboard3
<script setup>
import useClipboard from "vue-clipboard3";
import { Message } from "@arco-design/web-vue";
点击事件中 function(){ // 分享合同获取链接 getTaskLink(v.contractId).then(res => { const text = ref("");
text.value = res; copy(text); });
// const text = ref("http://localhost:5173/#/order");
// copy(text);
}
const { toClipboard } = useClipboard();
const copy = async text => { try { await toClipboard(text.value);
console.log("Copied to clipboard", text.value);
Message.info("合同链接已复制成功"); } catch (e) { console.error(e); } };
</script>
js写法
要在纯JavaScript中实现复制链接功能，您可以使用Document.execCommand()方法。以下是实现这一功能的步骤：
- 首先，在您的HTML中，添加一个按钮，并在按钮上绑定一个点击事件：
button id="copyButton">复制链接button>
- 在JavaScript中，编写处理点击事件的函数，该函数将链接复制到剪贴板：
document.getElementById("copyButton").addEventListener("click", function( ) { var contractLink = "您的合同链接地址"; // 替换为您的合同链接地址 var tempInput = document.createElement("input"); tempInput.value = contractLink; document.body.appendChild(tempInput); tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); console.log("链接已复制到剪贴板"); });
通过上述代码，当用户点击按钮时，合同链接将被复制到剪贴板中。请确保替换代码中的"您的合同链接地址"为实际的合同链接地址。
这是一个简单而有效的原生JavaScript方法，可以在现代浏览器中实现链接复制功能。