ant-design-vue - ant-form-item 如何添加解释信息？

Question

---

我希望的效果就是这样的(提示666)，但这个是react版的。
我的是 vue3 ， 这要怎么配置呢？我试了试不行呢。

"ant-design-vue": "^4.0.2","vue": "^3.2.45",

Answer 1

看起来你正在尝试在 Vue3 中使用 Ant Design Vue，并希望为 ant-form-item 添加解释信息。

在 Ant Design Vue 中，ant-form-item 本身并没有直接提供解释信息的属性，但你可以通过自定义 CSS 或者使用其他的 ant-design-vue 组件来达到你想要的效果。

这里有一个简单的示例，使用 Tooltip 组件来为 ant-form-item 提供解释信息：

<template>  <a-tooltip title="这是提示信息">    <a-form-item name="username" label="用户名">      <a-input v-model="form.username" />    </a-form-item>  </a-tooltip></template><script>import { Form, Input, Tooltip } from 'ant-design-vue';export default {  components: {    AFormItem: Form.Item,    ATooltip,  },  data() {    return {      form: {        username: '',      },    };  },};</script>

在这个例子中，我们为 ant-form-item 添加了一个 Tooltip 组件，它的 title 属性就是我们想要显示的解释信息。当用户将鼠标悬停在 Tooltip 上时，就会显示这个解释信息。