FlowPropertyPanelShell 属性面板外壳
流程属性面板的统一外壳布局。提供标准化的头部(标题+描述+图标+关闭按钮)、可滚动内容区和可选底部区。
基本用法
vue
<template>
<FlowPropertyPanelShell
title="审批人设置"
description="配置审批人、候选人和办理规则"
icon="i-material-symbols:person-check"
@close="handleClose"
>
<!-- 内容区 -->
<ApproverConfig />
<template #footer>
<n-button type="primary" @click="save">保存</n-button>
</template>
</FlowPropertyPanelShell>
</template>
<script setup>
import { FlowPropertyPanelShell } from '@/components/flow'
</script>Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | String | '属性设置' | 面板标题 |
description | String | '' | 面板副标题/描述 |
icon | String | 'i-material-symbols:tune' | 头部图标 CSS 类名 |
empty | Boolean | false | 是否显示空白状态 |
emptyText | String | '请先选择一个节点。' | 空白状态提示文本 |
bodyScrollable | Boolean | true | 内容区是否可滚动(overflow-y: auto) |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
close | — | 点击关闭按钮时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 主体内容区域 |
footer | 底部固定区域(仅当插槽存在时渲染) |
