标签：code vue 粘贴板 text cut clipboard copy data

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。