vue实现点击按钮一键复制功能

最新推荐文章于 2025-03-20 11:17:11 发布

可狗可乐

最新推荐文章于 2025-03-20 11:17:11 发布

阅读量2.6k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43773218/article/details/129983713

版权

文章介绍了两种实现网页内容一键复制的方法。一种是使用JavaScript直接操作DOM，通过选中并执行复制命令来实现；另一种是通过安装vue-clipboard2插件，简化复制操作并在Vue项目中方便地调用。两种方法都提供了复制成功的反馈提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击复制按钮后，将内容一键复制下来，不用去选中复制

第一种直接使用js方式：

<div class="mask-cont">
   <p><input id="input" /></p>
   <button class="btns" @click="copyToClip">复制</button>
 </div>

copyToClip() {
    var input = document.getElementById("input");
    input.value = this.copyText; // 要复制的文本框的内容（此处是后端返回的内容）
    input.select(); // 选中文本
    document.execCommand("copy"); 
    alert("复制成功")
}

可以通过 display:none将input框隐藏

第二种使用插件方式（推荐）：

安装插件

npm install --save vue-clipboard2

在main.js中引用

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

在页面中调用也有两种方式

第一种：value即是要复制的内容

<button @click="seccendCopy">第二种方式复制</button>

seccendCopy() {
      this.$copyText(this.value).then(
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制成功!");
        },
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制失败!");
        }
      );
}

第二种：

<template>
<div>
    <div>
      <textarea name="复制内容" id cols="30" rows="10" v-model="value"></textarea>
      <button
        v-clipboard:copy="value"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >第一种方式复制</button>   
    </div>
    <div>
      <textarea name="粘贴内容" id cols="30" rows="10"></textarea>
    </div>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      value: "A simple vuejs 2 binding for clipboard.js!"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>