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">