vue 复制合同链接功能

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()方法。以下是实现这一功能的步骤：

1. 首先，在您的HTML中，添加一个按钮，并在按钮上绑定一个点击事件：

button id="copyButton">复制链接button>

1. 在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方法，可以在现代浏览器中实现链接复制功能。