<script lang="ts" setup>
|
import { ChevronDown } from '@vben-core/icons';
|
import { cn } from '@vben-core/shared/utils';
|
|
const props = defineProps<{
|
class?: string;
|
}>();
|
|
// 控制箭头展开/收起状态
|
const collapsed = defineModel({ default: false });
|
</script>
|
|
<template>
|
<div :class="cn('vben-link inline-flex items-center', props.class)" @click="collapsed = !collapsed">
|
<slot :is-expanded="collapsed">
|
{{ collapsed }}
|
<!-- <span>{{ isExpanded ? '收起' : '展开' }}</span> -->
|
</slot>
|
<div :class="{ 'rotate-180': !collapsed }" class="transition-transform duration-300">
|
<slot name="icon">
|
<ChevronDown class="size-4" />
|
</slot>
|
</div>
|
</div>
|
</template>
|
