105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<script setup>
|
||
const props = defineProps({
|
||
code: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
const copied = ref(false)
|
||
const buttonRef = ref(null)
|
||
|
||
onMounted(() => {
|
||
// 确保按钮在代码块内部正确定位
|
||
if (buttonRef.value) {
|
||
const preElement = buttonRef.value.closest('pre')
|
||
if (preElement) {
|
||
preElement.style.position = 'relative'
|
||
}
|
||
}
|
||
})
|
||
|
||
const copyCode = () => {
|
||
navigator.clipboard.writeText(props.code).then(() => {
|
||
copied.value = true
|
||
setTimeout(() => {
|
||
copied.value = false
|
||
}, 2000)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="code-block-wrapper">
|
||
<slot />
|
||
<button
|
||
ref="buttonRef"
|
||
@click="copyCode"
|
||
class="copy-button"
|
||
:class="{ 'copied': copied }"
|
||
type="button"
|
||
>
|
||
<span v-if="!copied" class="flex items-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
|
||
</svg>
|
||
复制
|
||
</span>
|
||
<span v-else class="flex items-center text-green-400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
已复制！
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
.code-block-wrapper {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.code-block-wrapper pre {
|
||
margin: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.copy-button {
|
||
position: absolute !important;
|
||
top: 0.5rem !important;
|
||
right: 0.5rem !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
padding: 0.375rem 0.5rem !important;
|
||
font-size: 0.75rem !important;
|
||
color: #ffffff !important;
|
||
background-color: rgba(55, 65, 81, 0.9) !important;
|
||
border-radius: 0.375rem !important;
|
||
opacity: 0;
|
||
transition: all 0.2s ease !important;
|
||
z-index: 20 !important;
|
||
cursor: pointer !important;
|
||
border: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
pre:hover .copy-button {
|
||
opacity: 1;
|
||
}
|
||
|
||
.copy-button:hover {
|
||
background-color: rgba(55, 65, 81, 1) !important;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.copy-button.copied {
|
||
background-color: rgba(5, 150, 105, 0.9) !important;
|
||
}
|
||
|
||
.copy-button.copied:hover {
|
||
background-color: rgba(5, 150, 105, 1) !important;
|
||
}
|
||
</style>
|