36 lines
884 B
Vue
36 lines
884 B
Vue
<template>
|
|
<a-tooltip :content="`${value}\n点击复制完整唯一标识`">
|
|
<button class="identity-text" type="button" :aria-label="`复制完整唯一标识 ${value}`" @click="copyIdentity">
|
|
{{ shortValue }}
|
|
</button>
|
|
</a-tooltip>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Message } from '@arco-design/web-vue';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{ value: string }>();
|
|
const shortValue = computed(() => props.value.slice(-12));
|
|
|
|
async function copyIdentity() {
|
|
try {
|
|
await navigator.clipboard.writeText(props.value);
|
|
Message.success('完整唯一标识已复制');
|
|
} catch {
|
|
Message.error('复制失败，请从悬浮提示中复制');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.identity-text {
|
|
padding: 0;
|
|
color: rgb(var(--primary-6));
|
|
font: inherit;
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|