antdv4.0formitem更新的tooltip属性引发的思考

134 阅读2分钟

北京时间2023-10-19,ant-design-vue最近发布了4.0.4-4.0.6的小版本更新,其中4.0.4新增了对Form组件中FormItem的tooltip属性支持,这个功能我觉得在后台管理场景下还是非常实用的,tooltip属性作用于FormItem中的FormItemLabel区域,用来配置提示信息,当用户不确定该行的用处或者不知道填什么内容时,可以作为input里placeholder的补充

image.png 通过查找提交记录,ant-design是三年前增加的该功能,那么为什么antdv迟迟没有同步呢,是没有必要吗?其实这个功能是重叠的,react中可以通过label属性、vue中可以通过label插槽自定义FormItemLabel区域的展示内容,以vue举例:

<a-form-item
  name="username"
  :rules="[{ required: true, message: 'Please input your username!' }]"
>
  <template #label>
    <span>Username</span>
    <a-tooltip title="hello antdv4.0.4">
     <question-circle-outlined />
    </a-tooltip>
  </template>
</a-form-item>  

这也就是说即使不提供tooltip属性,通过用户自定义拓展也是可以实现功能的,而且查看ant-design的实现,你会发现他也只是帮你把本该写在外部的tooltip在组件内提前写了

image.png 回到ant-design-vue,那么同步这个功能是鸡肋嘛,我觉得不是,其实选择组件库的很大一部分原因是自己可以少写很多代码,提高效率,而且你可以不用但不能没有,哈哈哈,同时tooltip也提供了插槽,并传递了类名出来,你可以使用它也可以自定义样式

<a-form-item
  label="Username"
  name="username"
  :rules="[{ required: true, message: 'Please input your username!' }]"
>
  <template #tooltip="{ class }">
    <a-tooltip title="hello antdv4.0.4">
     <question-circle-outlined :class="class" />
    </a-tooltip>
  </template>
</a-form-item>  

是不是很眼熟感觉功能好像又有些重叠?这大概就是需要满足用户自定义需求的一些弊端吧,毕竟没有千篇一律的模板,其实还废弃了一个名为icon的插槽,哈哈哈,功能嘛就是自定义icon,比较可惜的一个点是直接传递tooltip的属性也被否决了,要说的话其实也是与tooltip插槽功能重叠了,但我个人还是比较喜欢这种,可惜可惜,相关PR讨论在这里#7014

// 被闭掉了
<a-form-item
  label="Username"
  name="username"
  :rules="[{ required: true, message: 'Please input your username!' }]"
  :tooltip="{ title: 'hello antdv4.0.4', placement: 'right', ...等等tooltip的API }"
>
  ...
</a-form-item>