46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { NButton, NCollapse, NCollapseItem } from 'naive-ui'
|
|
|
|
/** 说明与诊断默认直接展示，同时保留手动收起能力；阻塞错误不应放入此组件。 */
|
|
withDefaults(defineProps<{ title?: string }>(), { title: '使用说明' })
|
|
const expanded = ref<string[]>(['details'])
|
|
/** 原生按钮保留 Enter／Space 键盘激活；文字点击不再向外重复触发折叠。 */
|
|
function toggle() {
|
|
expanded.value = expanded.value.length ? [] : ['details']
|
|
}
|
|
defineExpose({
|
|
expand: () => {
|
|
expanded.value = ['details']
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<NCollapse v-model:expanded-names="expanded" class="detail-disclosure"
|
|
><NCollapseItem name="details"
|
|
><template #header
|
|
><NButton text size="small" :aria-expanded="expanded.length > 0" @click.stop="toggle">{{
|
|
title
|
|
}}</NButton></template
|
|
>
|
|
<div class="detail-disclosure-content"><slot /></div></NCollapseItem
|
|
></NCollapse>
|
|
</template>
|
|
|
|
<style>
|
|
/* 本组件专属布局与 Naive 内部结构覆盖。 */
|
|
@reference "../../styles/styles.css";
|
|
.detail-disclosure.n-collapse {
|
|
@apply text-xs text-muted;
|
|
}
|
|
.detail-disclosure .n-button,
|
|
.detail-disclosure .n-button:hover,
|
|
.detail-disclosure .n-button:focus,
|
|
.detail-disclosure .n-button:active {
|
|
color: var(--app-ink) !important;
|
|
}
|
|
.detail-disclosure-content {
|
|
@apply py-3 px-3.5 bg-(--app-subtle) text-ink leading-[1.8];
|
|
}
|
|
</style>
|