TuiPlus AutoStyle 介绍

一、什么是 AutoStyle？

AutoStyle 解决 uniappx 无法使用深层选择器（如 :deep）配置样式所带来的不便。AutoStyle 将样式控制简化为一种简洁的简写形式，让你能更直接、更灵活地管理组件外观。

AutoStyle 的核心特点：

• 简洁直观：提供简化的语法，告别繁琐的 props 配置。
• 精准控制：无需依赖 :deep，也能对组件内部样式进行有效管理。
• 易于维护：样式逻辑清晰，减少组件属性膨胀，代码更易读。

二、AutoStyle 的优势

• 告别样式臃肿：彻底摆脱通过大量 props 属性配置样式带来的代码臃肿问题，让组件 API 更加清爽。
• 提升开发效率：简洁的简写形式让样式定义和应用更加快速，减少重复代码。
• 增强可读性：组件的样式意图更明确，代码结构更清晰，便于团队协作和维护。
• 避免属性膨胀：不再需要为样式传递大量 props，保持组件实例属性简洁。

三、AutoStyle 的编写规范（以组件使用为例）

• 属性命名：通常遵循一定的命名约定，例如 size、color、margin 等，直观反映样式效果。
• 值定义：属性值通常是预定义的选项（如 m-10）或简单的数值/颜色值（如 margin="10"`）。
• 组合使用：多个 AutoStyle 属性可以同时应用于一个组件，实现复合样式效果。

四、如何使用 AutoStyle

1. 查阅组件文档：了解目标组件支持哪些 AutoStyle 简写形式及其对应的效果。
2. 直接应用：在模板（template）中使用组件时，直接通过简写属性来定义样式。