ant vue design 表单验证提示如何改为悬浮提示

Ant Design Vue 中的表单验证提示默认是出现在表单控件下方的，如果希望改为悬浮提示，可以在使用 a-form 标签时添加 scroll-to-first-error 属性，这样验证错误时会自动滚动到第一个错误的表单控件，并在控件旁边显示提示信息。

具体用法如下：

<template>
  <a-form ref="form" :scroll-to-first-error="true" @submit="handleSubmit" @validate="handleValidate">
    <!-- 表单内容 -->
  </a-form>
</template>

你也可以通过设置 a-form-item 组件的 help 属性来改变表单控件旁边显示的提示信息。

<template>
  <a-form ref="form" :scroll-to-first-error="true" @submit="handleSubmit" @validate="handleValidate">
    <a-form-item
      label="用户名"
      prop="username"
      :rules="[{ required: true, message: '请输入用户名' }]"
      :help="usernameError ? '用户名不能为空' : ''"
    >
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
      },
      usernameError: false,
    }
  },
  methods: {
    handleValidate(errors) {
      // 处理验证错误
      this.usernameError = errors.filter(item => item.field === 'username').length > 0
    },
    handleSubmit(e) {
      // 提交表单
    },
  },
}
</script>

希望这些信息能帮到你！