input、textare、div中通过 copy（默认） / cut 获取内容目标内容（cut剪切只能在input和textare中起作用）

 

方法一：

一、安装依赖

npm install clipboard --save

二、main.js引入

import Clipboard from 'clipboard';

Vue.prototype.Clipboard = Clipboard

三、button按钮添加如下属性

data-clipboard-target指向复印节点，这里指input的目标id

data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。

:data-clipboard-text指定你的 v-mode数据 {{ code }}，@click方法是中需要使用id的值

四、完整代码

 注意： 不用  :data-clipboard-text="code"  的话，可以使用  data-clipboard-action="copy/cut"  和  data-clipboard-target="#code" 

　　以下两种写法皆可

　　clipboard.on("success", function (e) {  });   

　　clipboard.on("success", (e) => {  }); 

<template>

  　　<div>　　　　　 　　　　　<div id="code">{{ code }}</div>   　　　　<button  　　　　　　　id="copy_text"   　　　　　　ref="copy" 　　　　　　　data-clipboard-action="copy"   　　　　　　:data-clipboard-text="code"   　　　　　　@click="copy"   　　　　>复制</button> 　　　</div>

</template>
<script>
export default {
  data() {
    return {
      code: "",
    };
  },
  mounted() {},
  methods: {
    copy() {
      var clipboard = new this.Clipboard("#copy_text");
      clipboard.on("success", (e) => {
        alert("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Message({
          message: "该浏览器不支持自动复制",
          type: "warning",
        });
        // 释放内存
        clipboard.destroy();
      });
    },
  },
};
</script>

 

方法二：

无需下载依赖，直接在初始全局的  index.html  文件中，引用JS

<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.1/clipboard.min.js">          

标签：code,vue,粘贴板,text,cut,clipboard,copy,data
来源： https://www.cnblogs.com/tingzi123/p/15449127.html