刚写好一个,可以参考一下
async function copyToClipboard(text) {
try {
return navigator.clipboard.writeText(text)
} catch {
const element = document.createElement('textarea')
const previouslyFocusedElement = document.activeElement
element.value = text
element.setAttribute('readonly', '')
element.style.contain = 'strict'
element.style.position = 'absolute'
element.style.left = '-9999px'
element.style.fontSize = '12pt'
const selection = document.getSelection()
const originalRange = selection ? selection.rangeCount > 0 && selection.getRangeAt(0) : null
document.body.appendChild(element)
element.select()
element.selectionStart = 0
element.selectionEnd = text.length
document.execCommand('copy')
document.body.removeChild(element)
if (originalRange) {
selection.removeAllRanges()
selection.addRange(originalRange)
}
if (previouslyFocusedElement) {
previouslyFocusedElement.focus()
}
}
}
export default copyToClipboard
.highlight > pre > span.copy {
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
display: block;
justify-content: center;
align-items: center;
border-radius: 4px;
width: 20px;
height: 20px;
opacity: 0;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
background-position: 50%;
background-size: 20px;
background-repeat: no-repeat;
transition: opacity 0.25s;
}
.highlight:hover > pre > span.copy {
opacity: 1;
}