### 如何在 uView 框架中设置 `<u-form>` 表单项 label 的颜色 在 uView 框架中，`<u-form>` 组件的表单项 `<u-form-item>` 提供了对 label 样式的自定义支持。可以通过 `labelStyle` 属性来设置 label 的样式，包括颜色、字体大小等[^1]。 以下是实现的具体方法和代码示例： #### 方法说明 通过为 `<u-form-item>` 设置 `labelStyle` 属性，可以传递一个对象来定义 label 的样式。例如，设置 label 的颜色可以通过以下方式实现： ```html <u-form-item label="成品名称" prop="productName" :label-style="{ color: '#FF5722' }"> <u-input :disabled="true" v-model="formData.productName" input-align="right" placeholder="成品名称" /> </u-form-item> ``` #### 完整示例代码 以下是一个完整的示例，展示了如何在 `<u-form>` 中设置表单项 label 的颜色： ```html <template> <view> <u-form :model="formData" :rules="rules" ref="uForm"> <!-- 设置 label 颜色为橙色 --> <u-form-item label="成品名称" prop="productName" :label-style="{ color: '#FF9800', fontSize: '16px' }"> <u-input :disabled="true" v-model="formData.productName" input-align="right" placeholder="成品名称" /> </u-form-item> <!-- 设置 label 颜色为红色 --> <u-form-item label="调整数量" prop="epStockDetail.num" required :label-style="{ color: '#F44336', fontWeight: 'bold' }"> <u-input v-model="formData.epStockDetail.num" input-align="right" placeholder="请输入调整数量" /> </u-form-item> </u-form> </view> </template> <script> export default { data() { return { formData: { productName: '', // 商品名称 epStockDetail: { num: '', // 调整数量 }, }, rules: { productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }], 'epStockDetail.num': [{ required: true, message: '请输入调整数量', trigger: 'blur' }], }, }; }, }; </script> ``` #### 注意事项 - `labelStyle` 属性是一个对象，用于定义 label 的内联样式。如果需要更复杂的样式，可以通过自定义 CSS 类并结合 `class` 属性使用[^3]。 - 如果需要动态改变 label 的颜色，可以通过绑定 Vue 数据变量实现动态样式控制。 ---