BizDivideTitle 分块标题

分块标题组件：左侧装饰竖条 + 标题文本 + 右侧操作区 + 可选分割线 + 可选折叠内容区。用于表单分块、详情分区、面板标题等场景，基于原生 div 封装，样式复用 Element Plus 主题变量，跟随明暗主题。

相对参考实现的优化：移除未使用的 showExtra 死属性与 absolute 定位 hack（操作区改为 flex 同行垂直居中）、去除大屏 px2vw 适配与硬编码双主题色（统一走 --el-* 变量）、竖条高度随字号自适应、超长标题省略号；扩展分割线、竖条自定义色、尺寸档位与可折叠内容区。

基础用法

title 指定标题文本，默认渲染主题色竖条与加粗标题；size 提供三档字号；divider 开启标题行下方整行分割线（true/'solid' 实线，'dashed' 虚线）。

基本信息

默认档位（default），标题加粗，左侧 4px 主题色竖条。

大标题（large）

默认标题（default）

小标题（small）

实线分割

divider 标题行下方渲染整行分割线，内容区随行排布。

虚线分割

无竖条 + 不加粗

组件不设外边距，块间距由使用方透传 style / 工具类控制（示例内通过 style 演示）。

<script setup lang="ts">
/** 基础用法：默认样式（竖条 + 加粗标题）与尺寸档位、分割线 */
import { BizDivideTitle } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <!-- 默认：14px 加粗 + 主题色竖条 -->
    <BizDivideTitle title="基本信息" />
    <div class="tip">默认档位（default），标题加粗，左侧 4px 主题色竖条。</div>

    <!-- 尺寸档位：large / default / small，竖条高度随字号自适应 -->
    <BizDivideTitle title="大标题（large）" size="large" style="margin-top: 24px" />
    <BizDivideTitle title="默认标题（default）" style="margin-top: 16px" />
    <BizDivideTitle title="小标题（small）" size="small" style="margin-top: 12px" />

    <!-- 分割线：divider 占满整行（true / 'solid' 等效，'dashed' 虚线） -->
    <BizDivideTitle title="实线分割" divider style="margin-top: 24px" />
    <div class="tip">divider 标题行下方渲染整行分割线，内容区随行排布。</div>
    <BizDivideTitle title="虚线分割" divider="dashed" style="margin-top: 16px" />

    <!-- 无竖条 / 不加粗 -->
    <BizDivideTitle title="无竖条 + 不加粗" :accent="false" :bold="false" style="margin-top: 24px" />
  </div>
</template>

<style scoped>
.tip {
  margin: 8px 0 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

右侧操作区与定制

#extra 插槽渲染右侧操作区（按钮/链接/图标按钮均可），与标题同行垂直居中；accent-color 自定义竖条颜色；#title 插槽优先于 title prop，支持图标 + 文本组合。

用户列表

操作区与标题同行垂直居中；large 档位下操作区字号不随标题放大。

危险操作区

竖条颜色默认 var(--el-color-primary)，可传任意 css 颜色值或变量。

插槽自定义标题

这是一个非常长的分块标题用于演示文本超出容器宽度后自动省略号截断的行为

操作区字号独立于标题档位（large 档位下按钮不会被撑大）；超长标题自动省略号。

<script setup lang="ts">
/** 右侧操作区与定制：#extra 插槽同行垂直居中（无绝对定位 hack），竖条自定义色 */
import { ElButton, ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { BizButton, BizDivideTitle } from 'vue3-ep-biz-lib'

const onAdd = (): void => {
  ElMessage.success('点击了新增')
}
</script>

<template>
  <div>
    <!-- #extra：flex 同行垂直居中，不再依赖 absolute 定位，行高变化不错位 -->
    <BizDivideTitle title="用户列表" divider>
      <template #extra>
        <ElButton size="small" @click="onAdd">
          <ElIcon style="margin-right: 4px"><Plus /></ElIcon>
          新增
        </ElButton>
        <ElButton size="small" link type="primary" @click="onAdd">查看全部</ElButton>
      </template>
    </BizDivideTitle>
    <div class="tip">操作区与标题同行垂直居中；large 档位下操作区字号不随标题放大。</div>

    <!-- accentColor：竖条自定义色（危险区/警示区区分块） -->
    <BizDivideTitle
      title="危险操作区"
      size="large"
      divider
      accent-color="var(--el-color-danger)"
      style="margin-top: 24px"
    />
    <div class="tip">竖条颜色默认 var(--el-color-primary)，可传任意 css 颜色值或变量。</div>

    <!-- #title 插槽优先于 title prop：图标 + 文本组合 -->
    <BizDivideTitle divider style="margin-top: 24px">
      <template #title>
        <ElIcon color="var(--el-color-primary)" style="margin-right: 6px"><Plus /></ElIcon>
        <span>插槽自定义标题</span>
      </template>
      <template #extra>
        <!-- 与 BizButton 组合：only-icon 图标按钮同样适用 -->
        <BizButton :icon="Plus" only-icon tooltip="新增一行" size="small" @click="onAdd" />
      </template>
    </BizDivideTitle>

    <!-- 超长标题自动省略号 -->
    <BizDivideTitle
      title="这是一个非常长的分块标题用于演示文本超出容器宽度后自动省略号截断的行为"
      divider
      style="margin-top: 24px"
    />
  </div>
</template>

<style scoped>
.tip {
  margin: 8px 0 16px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

可折叠内容区

collapsible 开启后标题行可点击（含键盘 Enter / Space），右侧渲染方向箭头，default 插槽作为内容区随 v-model:collapsed 展开 / 收起（grid 行高动画，内容始终挂载保留状态）；toggle() 为实例方法手动切换。

高级设置

水印开关：内容始终挂载（保留组件状态），仅视觉收起。

最近操作：（尚未操作）

审计日志（默认收起）

键盘可达：标题行获得焦点后 Enter / Space 同样触发折叠。

纯点击标题（无内容区）

无 default 插槽时仅渲染箭头不渲染内容区；click-title 在任意模式下均可用于自定义跳转等场景。

<script setup lang="ts">
/** 可折叠内容区：v-model:collapsed 受控 + collapse/click-title 事件 + toggle() 暴露方法 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizDivideTitle } from 'vue3-ep-biz-lib'
import type { BizDivideTitleInstance } from 'vue3-ep-biz-lib'

const advancedOpen = ref(false)
const lastAction = ref('（尚未操作）')

const onCollapse = (value: boolean): void => {
  lastAction.value = value ? '已收起' : '已展开'
}

const onTitleClick = (): void => {
  ElMessage.info('点击了标题行')
}

/** 手动切换：组件实例 expose 的 toggle() */
const titleRef = ref<BizDivideTitleInstance | null>(null)
const onManualToggle = (): void => {
  titleRef.value?.toggle()
}
</script>

<template>
  <div>
    <!-- 基础折叠：default 插槽即折叠内容，展开/收起带 grid 行高动画 -->
    <BizDivideTitle
      ref="titleRef"
      v-model:collapsed="advancedOpen"
      title="高级设置"
      collapsible
      divider
      @collapse="onCollapse"
    >
      <div class="form-area">
        <div class="form-row">水印开关：内容始终挂载（保留组件状态），仅视觉收起。</div>
        <div class="form-row">最近操作：{{ lastAction }}</div>
      </div>
    </BizDivideTitle>

    <div class="actions">
      <ElButton size="small" @click="onManualToggle">实例方法 toggle()</ElButton>
      <ElButton size="small" @click="advancedOpen = !advancedOpen">v-model 直改</ElButton>
    </div>

    <!-- 默认收起 + 右侧操作区共存 + 点击标题事件 -->
    <BizDivideTitle
      title="审计日志（默认收起）"
      size="small"
      collapsible
      :collapsed="true"
      style="margin-top: 24px"
      @click-title="onTitleClick"
    >
      <div class="form-area">
        <div class="form-row">键盘可达：标题行获得焦点后 Enter / Space 同样触发折叠。</div>
      </div>
    </BizDivideTitle>

    <!-- 无 default 插槽：collapsible 仅渲染箭头不渲染内容区 -->
    <BizDivideTitle title="纯点击标题（无内容区）" collapsible style="margin-top: 24px" />
  </div>
</template>

<style scoped>
.form-area {
  padding: 4px 0 12px;
}

.form-row {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
</style>

显示代码

长表单分组折叠

基本信息

结算信息

资质信息（选填）

营业执照、开户许可证等材料上传区（内容省略）

v-model:collapsed 受控（外部可批量展开/收起）；标题行点击即切换，折叠动画由 max-height 过渡实现。

长表单场景：多个 collapsible 分块（基础 / 结算默认展开，资质选填默认收起），v-model:collapsed 受控可外部批量展开收起，折叠后仅留标题行大幅缩短页面。

<script setup lang="ts">
/** 场景：长表单分组折叠——多个可折叠分块（资质默认收起），收起时仅留标题行 */
import { ref } from 'vue'
import { ElInput, ElOption, ElSelect } from 'element-plus'
import { BizDivideTitle } from 'vue3-ep-biz-lib'

const basicCollapsed = ref(false)
const extraCollapsed = ref(false)
</script>

<template>
  <div style="max-width: 520px; display: flex; flex-direction: column; gap: 8px">
    <BizDivideTitle title="基本信息" collapsible divider v-model:collapsed="basicCollapsed">
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0">
        <ElInput model-value="李四" placeholder="姓名" />
        <ElInput model-value="13900139000" placeholder="手机号" />
      </div>
    </BizDivideTitle>

    <BizDivideTitle title="结算信息" collapsible divider v-model:collapsed="extraCollapsed">
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0">
        <ElSelect model-value="icbc">
          <ElOption label="工商银行（尾号 6688）" value="icbc" />
          <ElOption label="招商银行（尾号 9900）" value="cmb" />
        </ElSelect>
        <ElInput model-value="ylkj-tech" placeholder="开户名" />
      </div>
    </BizDivideTitle>

    <!-- 默认收起的次要信息：collapsed 初始 true -->
    <BizDivideTitle title="资质信息（选填）" collapsible divider :collapsed="true" size="small">
      <div style="padding: 12px 0; font-size: 13px; color: var(--el-text-color-secondary)">
        营业执照、开户许可证等材料上传区（内容省略）
      </div>
    </BizDivideTitle>

    <div style="font-size: 13px; color: var(--el-text-color-secondary)">
      v-model:collapsed 受控（外部可批量展开/收起）；标题行点击即切换，折叠动画由 max-height 过渡实现。
    </div>
  </div>
</template>

显示代码

看板分区

生产运行

24 时7 天30 天

安全告警

能耗分析

大屏场景：accentColor 按业务域区分（运行默认 / 安全红 / 能耗绿），extra 放时间范围切换器。

<script setup lang="ts">
/** 场景：看板分区——accent 色区分业务域，extra 放时间范围切换 */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizDivideTitle } from 'vue3-ep-biz-lib'

const range = ref('7d')
</script>

<template>
  <div style="max-width: 640px; display: flex; flex-direction: column; gap: 16px">
    <BizDivideTitle title="生产运行" size="large" divider>
      <template #extra>
        <ElRadioGroup v-model="range" size="small">
          <ElRadioButton value="24h">24 时</ElRadioButton>
          <ElRadioButton value="7d">7 天</ElRadioButton>
          <ElRadioButton value="30d">30 天</ElRadioButton>
        </ElRadioGroup>
      </template>
    </BizDivideTitle>
    <div style="height: 72px; background: var(--el-fill-color-light); border-radius: 6px" />

    <BizDivideTitle title="安全告警" size="large" divider accent-color="var(--el-color-danger)" />
    <div style="height: 72px; background: var(--el-fill-color-light); border-radius: 6px" />

    <BizDivideTitle title="能耗分析" size="large" divider accent-color="var(--el-color-success)" />
    <div style="height: 72px; background: var(--el-fill-color-light); border-radius: 6px" />
  </div>
</template>

显示代码

详情页分区导航

基本信息

已认证

变更记录

12 条

09-23 王五 调整巡检频次 2 次/日 → 1 次/日
09-20 李四 更换备件 湿度探头 ×1

关联工单

3 未闭环

WO-1001 / WO-1008 / WO-1012

详情页场景：基本信息 / 变更记录 / 关联工单三分区——extra 挂计数徽标（12 条 / 3 未闭环），次要分区默认折叠。

<script setup lang="ts">
/** 场景：详情页分区导航——extra 挂计数徽标，可折叠收起次要分区 */
import { ElTag } from 'element-plus'
import { BizDivideTitle } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 520px; display: flex; flex-direction: column; gap: 8px">
    <BizDivideTitle title="基本信息" divider>
      <template #extra>
        <ElTag size="small" type="success">已认证</ElTag>
      </template>
    </BizDivideTitle>

    <BizDivideTitle title="变更记录" divider collapsible>
      <template #extra>
        <ElTag size="small" type="info">12 条</ElTag>
      </template>
      <div style="padding: 10px 0; font-size: 13px; color: var(--el-text-color-secondary)">
        09-23 王五 调整巡检频次 2 次/日 → 1 次/日<br>
        09-20 李四 更换备件 湿度探头 ×1
      </div>
    </BizDivideTitle>

    <BizDivideTitle title="关联工单" divider collapsible :collapsed="true">
      <template #extra>
        <ElTag size="small" type="warning">3 未闭环</ElTag>
      </template>
      <div style="padding: 10px 0; font-size: 13px; color: var(--el-text-color-secondary)">WO-1001 / WO-1008 / WO-1012</div>
    </BizDivideTitle>
  </div>
</template>

显示代码

设置页分组

通知设置

安全设置

设置场景：通知 / 安全两组——内容区行内 switch，extra 挂「更多」link 入口。

<script setup lang="ts">
/** 场景：设置页分组——通知/安全两组，行内开关与 extra 更多入口 */
import { ref } from 'vue'
import { ElMessage, ElSwitch } from 'element-plus'
import { BizButton, BizDivideTitle } from 'vue3-ep-biz-lib'

const emailNotify = ref(true)
const smsNotify = ref(false)
const mfa = ref(true)

const onMore = (): void => {
  ElMessage.info('查看安全策略（示例）')
}
</script>

<template>
  <div style="max-width: 480px; display: flex; flex-direction: column; gap: 8px">
    <BizDivideTitle title="通知设置" divider>
      <template #extra>
        <BizButton link type="primary" size="small" @click="ElMessage.info('通知规则设置（示例）')">更多</BizButton>
      </template>
      <div style="display: flex; flex-direction: column; gap: 10px; padding: 12px 0">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span style="font-size: 14px">工单邮件提醒</span>
          <ElSwitch v-model="emailNotify" />
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span style="font-size: 14px">告警短信通知</span>
          <ElSwitch v-model="smsNotify" />
        </div>
      </div>
    </BizDivideTitle>

    <BizDivideTitle title="安全设置" divider>
      <template #extra>
        <BizButton link type="primary" size="small" @click="onMore">更多</BizButton>
      </template>
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0">
        <span style="font-size: 14px">两步验证（MFA）</span>
        <ElSwitch v-model="mfa" />
      </div>
    </BizDivideTitle>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	''	标题文本（#title 插槽优先）
size	'large' | 'default' | 'small'	'default'	尺寸档位：16px / 14px / 13px，竖条高度随字号自适应
bold	boolean	true	是否加粗标题（仅作用于标题文本，不影响右侧操作区）
accent	boolean	true	是否展示左侧装饰竖条
accent-color	string	''	竖条自定义颜色（css 颜色值或变量，默认 var(--el-color-primary)）
divider	boolean | 'solid' | 'dashed'	false	标题行下方整行分割线；true / 'solid' 实线，'dashed' 虚线
collapsible	boolean	false	是否可折叠：标题可点击切换，右侧渲染箭头
collapsed	boolean	false	折叠状态（v-model:collapsed）

原生属性透传：根节点为原生 div，id（锚点定位）、class、style 等任意属性经 $attrs 透传。

Events

事件名	参数	说明
update:collapsed	(value: boolean)	v-model:collapsed 更新
collapse	(value: boolean)	折叠状态变化（点击标题 / 键盘 / toggle() 均触发）
click-title	(event: MouseEvent)	点击标题行（任意模式均触发，键盘触发不派发）

Slots

插槽名	说明
default	折叠内容区（仅 collapsible 且提供插槽时渲染）
title	自定义标题（优先于 title prop，支持图标 + 文本组合）
extra	右侧操作区（存在即渲染，与标题同行垂直居中）

Expose

属性/方法	说明
toggle	() => void 手动切换折叠状态（等价于点击标题行）