38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<template>
|
|
<div
|
|
class="overflow-hidden rounded-xl bg-slate-900 p-3 text-gray-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"
|
|
>
|
|
<div class="mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.08em] text-gray-400">
|
|
<span>{{ lang || 'text' }}</span>
|
|
<button
|
|
class="rounded-full border border-white/10 bg-white/10 px-2.5 py-1 text-[11px] text-gray-50 transition-colors hover:bg-white/15"
|
|
@click="handleCopy"
|
|
>
|
|
{{ copied ? '已复制' : '复制' }}
|
|
</button>
|
|
</div>
|
|
<pre class="m-0 whitespace-pre-wrap font-mono text-[13px] leading-relaxed"><code>{{ code }}</code></pre>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
code: string
|
|
lang?: string
|
|
}>()
|
|
|
|
const copied = ref(false)
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(props.code)
|
|
copied.value = true
|
|
setTimeout(() => (copied.value = false), 1500)
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}
|
|
</script>
|