vue 复制文字到粘贴板 —— clipboard使用总结

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">          
上一篇:小米路由器4刷机说明(openwrt-21.02.1)


下一篇:Idea提示“System clipboard is unavailable”