如何设置 vxe-form 表单校验提示框的样式

在后台管理系统中，表单校验是保证数据质量的关键环节。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 变量表单校验提示框的样式

<template>
  <div>
    字体：<vxe-radio-group v-model="validFontSize">
      <vxe-radio-button checked-value="12px" content="12px"></vxe-radio-button>
      <vxe-radio-button checked-value="13px" content="13px"></vxe-radio-button>
      <vxe-radio-button checked-value="14px" content="14px"></vxe-radio-button>
      <vxe-radio-button checked-value="15px" content="15px"></vxe-radio-button>
      <vxe-radio-button checked-value="16px" content="16px"></vxe-radio-button>
    </vxe-radio-group>
    边距：<vxe-radio-group v-model="validPadding">
      <vxe-radio-button checked-value="2px" content="2px"></vxe-radio-button>
      <vxe-radio-button checked-value="4px" content="4px"></vxe-radio-button>
      <vxe-radio-button checked-value="6px" content="6px"></vxe-radio-button>
      <vxe-radio-button checked-value="8px" content="8px"></vxe-radio-button>
      <vxe-radio-button checked-value="10px" content="10px"></vxe-radio-button>
      <vxe-radio-button checked-value="12px" content="12px"></vxe-radio-button>
      <vxe-radio-button checked-value="14px" content="14px"></vxe-radio-button>
    </vxe-radio-group>

    <vxe-form
      v-bind="formOptions"
      v-on="formEvents"
      :style="{
        '--vxe-ui-form-validate-error-font-size': validFontSize,
        '--vxe-ui-form-validate-error-padding': validPadding
      }"
    >
    </vxe-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'

const validFontSize = ref('')
const validPadding = ref('6px')

const sexItemRender = reactive({
  name: 'VxeSelect',
  options: [
    { label: '女', value: 'Women' },
    { label: '男', value: 'Man' }
  ]
})

const formOptions = reactive({
  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: '重置' }
        ]
      }
    }
  ]
})

const formEvents = {
  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