订单状态标签应使用data-status属性控制样式和交互，避免class硬编码；通过属性选择器匹配状态并用伪元素添加图标；禁用状态需同时设置pointer-events: none和cursor: not-allowed；国际化与状态流转逻辑需业务层协同。
订单状态标签不是纯视觉装饰，它得承载语义、支持交互、适配不同状态流转，直接用 span + 固定颜色写死会很快失控。
用 data-status 控制样式比 class 更灵活
硬编码多个 class（如 .status-pending、.status-shipped）会导致 HTML 膨胀、CSS 冗余。改用统一 class + 属性选择器更易维护：
<span class="order-status" data-status="paid">已支付</span> <span class="order-status" data-status="delivered">已签收</span>
对应 CSS 直接按属性匹配：
[data-status="pending"] { background: #FFD700; color: #333; }
[data-status="paid"] { background: #4CAF50; color: white; }
[data-status="shipped"] { background: #2196F3; color: white; }
[data-status="delivered"] { background: #9C27B0; color: white; }
- 新增状态只需加一条 CSS 规则，不用改 HTML class 名
- 服务端或 JS 动态更新
data-status值即可切换样式，无需操作 class 列表 - 避免 class 名冲突（比如项目里已有
.paid表示其他含义）
带图标时优先用伪元素，别塞 <i></i> 或 SVG 内联
图标本质是装饰性内容，不该污染 DOM 结构。用 ::before 注入 Unicode 或字体图标更干净：
[data-status="paid"]::before {
content: "✅";
margin-right: 4px;
}
[data-status="shipped"]::before {
content: "?";
margin-right: 4px;
}
- 如果用 iconfont，确保
content对应正确 Unicode（如"\e901"），并声明font-family - 避免在 HTML 里写
<i class="icon-shipped"></i>—— 状态变更时要同步操作图标节点，容易漏掉 - 图标大小用
font-size控制，和文字自动对齐，不用额外vertical-align
禁用状态要用 pointer-events: none，别只靠 opacity
有些订单状态不可点击（如“已取消”），仅设 opacity: 0.6 不够——用户仍能触发 hover、focus，甚至误点。必须配合交互禁用：
[data-status="cancelled"] {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
-
pointer-events: none是关键，它让元素彻底不响应鼠标事件 -
cursor: not-allowed是视觉提示，但不能替代pointer-events - 别用
disabled属性——span不支持该属性，加了也无效
真正麻烦的是状态文案的国际化和顺序逻辑，比如 “已发货” 在中文里是动词短语，英文可能用 “Shipped” 或 “Dispatched”，而状态流转路径（pending → paid → shipped → delivered）决定了哪些状态能回退、哪些需灰显——这些没法靠 CSS 解决，得和业务层对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
