20 lines
815 B
Vue
20 lines
815 B
Vue
|
<script setup lang="ts">
|
||
|
|
withDefaults(defineProps<{ title?: string }>(), { title: '操作说明' })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<details class="inline-help">
|
||
|
|
<summary>{{ title }}</summary>
|
||
|
|
<div class="inline-help__content"><slot /></div>
|
||
|
|
</details>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.inline-help { min-width: 0; color: var(--cc-muted, #667085); font-size: var(--admin-font-caption, 12px); line-height: 1.6; }
|
||
|
|
.inline-help > summary { width: fit-content; color: var(--cc-primary, #1677ff); cursor: pointer; }
|
||
|
|
.inline-help > summary:focus-visible { outline: 2px solid var(--cc-primary, #1677ff); outline-offset: 2px; }
|
||
|
|
.inline-help__content { margin-top: var(--admin-space-1, 4px); }
|
||
|
|
.inline-help__content :deep(p) { margin: 0; }
|
||
|
|
.inline-help__content :deep(p + p) { margin-top: var(--admin-space-1, 4px); }
|
||
|
|
</style>
|