新元件：一個帶有複製按鈕的文字框（Input）

[kevinlee-06]

CopyInput 元件

用法

就跟一般 <input/> 一樣

  <CopyInput value="106 臺北市大安區新生南路一段 3 號......"/>

螢幕截圖

TODO

• 深色模式
• 減少複製圖示的 padding
• 訊息樣式

老 Co 留言：

This pull request introduces a new CopyInput component in the app/components/CopyInput.vue file. The component allows users to copy a given value to the clipboard with a button click, providing feedback on the success or failure of the copy action.

Key changes include:

• New Component Implementation:

  • Added a new CopyInput component with a template, script, and style sections. The component includes an input field and a button to copy the input value to the clipboard.

• Clipboard Copy Functionality:

  • Implemented the copyToClipboard method, which uses the modern navigator.clipboard API when available and falls back to the document.execCommand('copy') method for older browsers.

• User Feedback:

  • Added a mechanism to display success or error messages to the user after attempting to copy the value. The message is shown for 2 seconds.

• Styling:

  • Added scoped styles for the CopyInput component, including flexbox layout for the input and button, and styles for the feedback message.

[Copilot]

PR Overview

A new CopyInput component is introduced to allow users to copy a text value via a clipboard interaction, providing immediate visual feedback on the success or failure of the copy operation.

• Implements clipboard copy functionality using both the modern navigator.clipboard API and a fallback for older browsers.
• Provides user feedback messages and styles the component with scoped CSS.
• Organizes the input field and copy button using a flexbox layout.

Reviewed Changes

File	Description
app/components/CopyInput.vue	New component implementation including copy-to-clipboard and user feedback logic

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (2)

app/components/CopyInput.vue:42

• Call inputRef.value.focus() before inputRef.value.select() to ensure the text is properly focused prior to selection, which can improve the reliability of the fallback clipboard copy in older browsers.

inputRef.value.select()

app/components/CopyInput.vue:43

• Consider adding tests that cover this fallback branch using document.execCommand to verify that the expected behavior (copy success or failure) is correctly handled.

const successful = document.execCommand('copy')