优化
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { Info } from '@lucide/vue'
|
||||
|
||||
defineProps<{ title: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-tooltip :trigger="['hover', 'focus']" placement="top" effect="light" :show-after="150" :hide-after="100" :enterable="true">
|
||||
<template #content><div class="customs-help-content"><strong>{{ title }}</strong><slot /></div></template>
|
||||
<button type="button" class="customs-help" :aria-label="`查看${title}`"><Info :size="14" aria-hidden="true" /></button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.customs-help { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: help; vertical-align: middle; }
|
||||
.customs-help:hover,.customs-help:focus-visible { color: var(--primary); }
|
||||
.customs-help:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
||||
.customs-help-content { max-width: 320px; color: var(--navy); font-size: 12px; font-weight: 400; line-height: 1.6; white-space: normal; }
|
||||
.customs-help-content > strong { display: block; margin-bottom: 4px; }
|
||||
.customs-help-content :deep(p) { margin: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user