在后台管理系统中表单校验是保证数据质量的关键环节。vxe-form 默认的校验提示样式可能无法完全匹配项目的视觉风格。vxe-form 提供了简洁的 CSS 变量方案让你可以轻松调整校验提示框的字体大小、内边距、颜色等样式无需编写复杂的样式覆盖代码。CSS 变量vxe-form 的校验提示框校验错误信息支持以下 CSS 变量CSS 变量说明默认值–vxe-ui-form-validate-error-font-size校验错误信息的字体大小跟随主题–vxe-ui-form-validate-error-padding校验错误信息的内边距跟随主题–vxe-ui-form-validate-error-color校验错误信息的文字颜色跟随主题通过在 组件上设置 style 属性即可覆盖这些变量实现样式的灵活定设置。代码可以通过 css 变量表单校验提示框的样式templatediv字体vxe-radio-groupv-modelvalidFontSizevxe-radio-buttonchecked-value12pxcontent12px/vxe-radio-buttonvxe-radio-buttonchecked-value13pxcontent13px/vxe-radio-buttonvxe-radio-buttonchecked-value14pxcontent14px/vxe-radio-buttonvxe-radio-buttonchecked-value15pxcontent15px/vxe-radio-buttonvxe-radio-buttonchecked-value16pxcontent16px/vxe-radio-button/vxe-radio-group边距vxe-radio-groupv-modelvalidPaddingvxe-radio-buttonchecked-value2pxcontent2px/vxe-radio-buttonvxe-radio-buttonchecked-value4pxcontent4px/vxe-radio-buttonvxe-radio-buttonchecked-value6pxcontent6px/vxe-radio-buttonvxe-radio-buttonchecked-value8pxcontent8px/vxe-radio-buttonvxe-radio-buttonchecked-value10pxcontent10px/vxe-radio-buttonvxe-radio-buttonchecked-value12pxcontent12px/vxe-radio-buttonvxe-radio-buttonchecked-value14pxcontent14px/vxe-radio-button/vxe-radio-groupvxe-formv-bindformOptionsv-onformEvents:style{ --vxe-ui-form-validate-error-font-size: validFontSize, --vxe-ui-form-validate-error-padding: validPadding }/vxe-form/div/templatescriptsetupimport{ref,reactive}fromvueimport{VxeUI}fromvxe-pc-uiconstvalidFontSizeref()constvalidPaddingref(6px)constsexItemRenderreactive({name:VxeSelect,options:[{label:女,value:Women},{label:男,value:Man}]})constformOptionsreactive({vertical:false,data:{name:,nickname:,sex:,age:},rules:{name:[{required:true,message:请输入名称}],sex:[{required:true,message:请选择性别}],age:[{required:true,message:请输入年龄请输入年龄请输入年龄请输入年龄请输入年龄请输入年龄请输入年龄请输入年龄}]},items:[{field:name,title:名称,span:24,itemRender:{name:VxeInput}},{field:sex,title:性别,span:12,itemRender:sexItemRender},{field:age,title:年龄,span:12,itemRender:{name:VxeInput}},{align:center,span:24,itemRender:{name:VxeButtonGroup,options:[{type:submit,content:提交,status:primary},{type:reset,content:重置}]}}]})constformEvents{submit(){VxeUI.modal.message({content:保存成功,status:success})},reset(){VxeUI.modal.message({content:重置事件,status:info})}}/script全局统一样式如果希望在整个项目中统一校验提示框的样式可以在全局样式文件中直接覆盖 CSS 变量/* global.css */:root{--vxe-ui-form-validate-error-font-size:14px;--vxe-ui-form-validate-error-padding:8px 12px;--vxe-ui-form-validate-error-color:#f56c6c;}https://vxeui.com
