寫入剪切板

使用 clipboard.js 第三方插件：

clipboard.js

安裝clipboard.js

yarn

yarn add clipboard

npm

npm install clipboard --save

使用示例（vue）

<template>
	<div>
	  <span v-copy>複製這段文本</span>
    </div>
</template>

<script>
import ClipboardJS from "clipboard";

export default {
	directives: {
		copy: {
		  bind(el, binding, vnode) {
		    // 獲取vue實例
		    const that = vnode.context;
		    // 1-監聽點擊的元素
		    that.handleCopy(el);
		  },
		}
	},
	methods: {
		handleCopy(element) {
          // 2-實例化剪切板對象，指定要複製文本的元素
          const clipboard = new ClipboardJS(element, {
            /**
             * 動態獲取要複製的文案
             * @param {HTMLElement} trigger 監聽點擊的元素
             * @return {string} 要複製的文案
             */
            text: function(trigger) {
              return trigger.innerText;
            }
          });
          // 3-結果回調
          clipboard.on('success', function(e) {
            console.info('e= :', e);

            // 清除文字的選中狀態
            e.clearSelection();
          });

          clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
          });
        },
	}
}
</script>

這裡使用了vue的自定義指令，

• 指令第一次綁定到元素時，監聽元素的點擊（複製）事件。
• 點擊元素時，執行text函數，並將結果（字元串）寫入剪切板。
• 寫入成功，執行success回調函數；寫入失敗，執行error回調函數。

原生API

可以使用原生API：Clipboard.writeText()實現寫入剪切板。

var promise = navigator.clipboard.writeText(newClipText)

• newClipText：寫入的內容

其它API

• Clipboard: write()：該方法理論上可以寫入任意數據(與writeText()不同，後者只能寫入文本)。瀏覽器通常支持編寫文本、HTML和PNG圖像數據

讀取剪切板

<template>
	<div>
	  <p @click="getClipboard">讀取剪切板</p>
	  <p>{{ content }}</p>
    </div>
</template>

<script>
export default {
	data() {
		return {
			content: '',
		}
	},
	methods: {
		async getClipboard() {
          // 讀取剪切板
          const clipboardContent = await navigator.clipboard.readText();
          this.content = clipboardContent;
        },
	}
}
</script>

使用原生API：Clipboard.readText() 即可。

其它API

• Clipboard: read() ：該方法理論上可以返回任意數據與readText()不同，後者只能返迴文本)。瀏覽器通常支持讀取文本、HTML和PNG圖像數據