今天我學習了 useClipboard，這是一個讓資料輕鬆複製到剪貼簿的功能。雖然看似簡單，卻非常實用。正當我深入研究這個功能時，我的朋友水豚君悄然來到我身邊，以他特有的平靜方式指導我。
「學習就像複製資料到剪貼簿，」水豚君娓娓道來，「僅僅掌握操作還不夠，你要理解為什麼要複製，何時需要複製—這才是關鍵。」
他的話讓我陷入沉思。我確實一直在努力學習 VueUse 的各種功能，但有時會陷入只關注表面操作的陷阱，而忽視了背後的動機。今天，我下定決心不僅要學習如何使用功能，更要深入思考它們的應用場景。
水豚君或許是個沉默寡言的老師，但他的教導卻深入骨髓。我決心將這種學習態度貫徹到往後的每一天。無論是 useClipboard 還是其他功能，我都會努力領會它們的真正價值。

文件

官方文件

前情提要

useClipboard 是一個用於操作剪貼簿的 VueUse 函式。本文將詳細介紹其功能、參數和使用場景，並提供實用範例。

useClipboard API

功能

useClipboard 提供了對瀏覽器剪貼簿 API 的響應式封裝。它允許讀取和寫入剪貼簿內容，並提供了複製操作的狀態管理。這個函式適用於需要與剪貼簿交互的各種場景，如「複製到剪貼簿」功能或監控剪貼簿變化。

Props

options 參數

返回值

useClipboard 返回一個包含以下屬性的對象:

用法範例

function useClipboard(options?: UseClipboardOptions): UseClipboardReturn

範例 1: 基本用法

Playground 範例

<template>
	<div style="margin:15px;">
	  <div>useClipboard 測試範例</div>
	  <div v-if="isSupported" style="margin-top:5px; padding:15px; border-style: solid;border-width: 1px;">
	    <p>
	      目前已被複製的內容: <code>{{ text || 'none' }}</code>
	    </p>
	    <input v-model="input" type="text" placeholder="這裡輸入想複製的字" style="width:250px;border-style: solid;border-width: 1px; margin-right:5px;padding-left:5px">
	    <button @click="copy(input)" style="border-style: solid;border-width: 1px;padding:2px;">
	      複製
	    </button>
	      <div v-if="copied" style="margin-top:5px; color:red;">複製成功！找個地方 Ctrl(⌘)+V 試試看～</div>
	  </div>
	
	  <p v-else>
	    您的瀏覽器不支援剪貼簿的 API
	  </p>
	</div>  
</template>

<script setup>
	import { ref } from 'vue'
	import { useClipboard } from '@vueuse/core'
	const input = ref('點右邊複製按鈕複製這段文字')
	const { text, isSupported, copy, copied } = useClipboard()
</script>

範例 2: 自定義複製持續時間

<template>
  <div>
    <button @click="copy('自定義文本')">複製自定義文本</button>
    <p v-if="copied">複製成功! (3秒後消失)</p>
  </div>
</template>

<script setup>
import { useClipboard } from '@vueuse/core'

const { copy, copied } = useClipboard({ copiedDuring: 3000 })
</script>

useClipboard 的使用場景

1. 一鍵複製: 在需要快速複製文本(如分享連結、程式碼片段…等等)的場景中使用。
2. 表單填充: 監聽剪貼簿的變化，自動填充表單字段。
3. 富文本編輯器: 實現剪下、複製、貼上的功能。
4. 安全檢查: 在敏感信息輸入時，監控並警告用戶不要從剪貼簿貼上。

為什麼開發者需要 useClipboard

1. 簡化剪貼簿的操作: 封裝了複雜的 Clipboard API，提供簡潔的接口。
2. 響應式設計: 與 Vue 的響應式系統完美集成，便於狀態管理。
3. 跨瀏覽器兼容: 處理了不同瀏覽器的兼容性問題，包括舊版瀏覽器的替代方案( document.execCommand('copy') )。
4. 即插即用: 快速實現常見的剪貼簿相關功能，減少重複的程式碼。

結論

善用 useClipboard 可顯著提升用戶體驗、簡化剪貼簿相關功能的開發流程，同時還處理跨瀏覽器的兼容性。無論是表單處理、內容分享還是資料輸入等場景，useClipboard 都是一個非常好用的工具。