SepDescriptions 描述列表组件 v1.4.0
只读描述信息展示 · column 响应式 / bordered 边框 / direction 垂直 / size 尺寸 / span 跨列 / extra 操作区 / labelWidth 标签宽度 / labelKey+valueKey 字段映射 / labelAlign+contentAlign 对齐 / labelClassName+contentClassName 类名 / width+minWidth 列宽 / empty 空状态 / separator 分隔符 / loading 加载态
1. 基础用法（3 列）
HTML 声明式标签
JS API 初始化
2. bordered 边框模式
HTML 声明式标签
JS API 初始化
3. column 列数（1 / 2 / 3 / 4）
HTML 声明式标签（column=2）
HTML 声明式标签（column=1）
JS API 初始化
4. span 跨列（某项占多列）
HTML 声明式标签
JS API 初始化
5. size 尺寸（small / default / large）
HTML 声明式标签
JS API 初始化
6. colon 冒号（默认开启 / 关闭）
HTML 声明式标签（colon 默认开启）
HTML 声明式标签（colon=false）
JS API 初始化
7. labelStyle / contentStyle 列样式
HTML 声明式标签（JSON 字符串）
JS API 初始化
8. title 标题 & i18n 国际化（x-i18n: 前缀）
HTML 声明式标签（title + x-i18n label）
JS API 初始化
9. API 控制（setItems / setColumn / setBordered / setTitle / setSize / setColon）
JS API 初始化
当前状态
10. direction 垂直布局（horizontal / vertical）
HTML 声明式标签（horizontal 默认）
HTML 声明式标签（direction="vertical"）
HTML 声明式标签（vertical + bordered）
JS API 初始化
11. extra 操作区（标题右侧自定义内容）
HTML 声明式标签（纯文本 extra）
HTML 声明式标签（HTML 按钮 extra）
JS API 初始化
12. 响应式 column（{ xs, sm, md, lg, xl, xxl }）
HTML 声明式标签（JSON 对象 column）
拖动浏览器窗口宽度，观察列数自动变化（xs<576 → sm≥576 → md≥768 → lg≥1200）
JS API 初始化
13. labelWidth 标签宽度（px / em / 任意 CSS 单位）
HTML 声明式标签（label-width="80"）
HTML 声明式标签（label-width="6em"）
JS API 初始化
14. labelKey / valueKey 字段映射
HTML 声明式标签（接口原字段 name/desc 直用）
JS API 初始化
15. labelAlign / contentAlign 对齐
全局级：HTML 声明式标签（label-align="right" content-align="center"）
Item 级：单个字段覆盖全局对齐
JS API 初始化
16. labelClassName / contentClassName
Item 级自定义类名：金额标红、状态标绿。CSS 由 Demo 页面内联样式提供。
HTML 声明式标签（JSON items 中含 labelClassName / contentClassName）
JS API 初始化
17. width / minWidth 列宽控制
HTML 声明式标签：固定宽度 width + 最小宽度 minWidth
JS API：width 锁定列宽、minWidth 保证最小宽度
18. empty 空状态
HTML 声明式标签：items 为空数组时自动显示空状态
JS API：自定义空文本 + 动态切换
19. separator 分隔符
HTML 声明式标签：替代冒号，自定义分隔符
JS API：全局分隔符 + 单字段覆盖
20. loading 加载态
HTML 声明式标签：loading 属性 + 脉冲动画
JS API：异步模拟，3秒后恢复数据
21. 综合场景：电商订单详情
bordered + labelAlign right + labelWidth + className 组合，模拟真实业务场景
HTML 声明式标签：bordered 边框 + 右对齐 + 金额标红
JS API：相同数据模拟异步加载 → 加载态 → 数据就绪