阅读 1493

naive ui尝鲜踩坑--todolist实战

这是我参与更文挑战的第2天,活动详情查看:更文挑战

简述

最近尤大大推荐了一个组件库叫naiveui,好奇就去看了一下,发现组件还真的挺丰富的,数了一下大概75个,比antd都多,可能是我见过最多的组件库,于是打算尝个鲜踩踩坑,拿个todo练练手

官网地址:www.naiveui.com/zh-CN/os-th…

安装:

npm i -D naive-ui

按需加载

默认支持按需加载,不像ant和element-plus似的还需要引入插件 只需要 import { NForm, NFormItem, NInput, NButton, NSpace } from "naive-ui"; 然后使用components注册即可

遇到的坑

  1. 图标库使用的xicons,对应需要安装vue版本的插件@vicons/对应的图标库,但是到这个网站www.xicons.org/#/

注意: xicons分了好几类图标库,如果使用其中一种,需要安装对应的图标库分类的插件,比如使用fluentionicon5这两个,则需要安装@vicons/fluent@vicons/ionicons5,我开始没有注意到这点,导致在其中一个库里搜索另外一个库的图标搜不到,还以为是支持的不全

  1. popconfirm在tsx的形式下,不支持在组件标签之间定义slot,如下所示
 <NPopconfirm
  >
    确认删除吗?
    {{
      trigger: () => <NButton type='error' ghost>删除</NButton>
    }}
  </NPopconfirm>
复制代码

只能通过v-slots实现slot分发

<NPopconfirm  
    v-slots={{
      trigger: () => <NButton type='error' ghost>删除</NButton>
    }}
>
    确认删除吗?
</NPopconfirm>
复制代码
  1. form默认没有提供resetFields方法,如果想重置表单的值需要自己手动重置,form组件只提供了重置错误提示的方法

参考作者给的方案:github.com/TuSimple/na…

  1. table组件如果想给每列设置边框,类似于antd的table的bordered属性,在naiveui中光设置bordered只能给table的最外层加border,需要在单独设置一个属性叫:single-line="false"才可以达到bordered效果,这个属性在文档中并没有明确说明。

  2. form表单校验的时候,rules必须是一个对象类似:

  const rules = {
    title: {
      required: true,
      message: "请填写todo的title",
    },
  };
复制代码

要使规则生效,需要在form-item设置属性path,elem的prop,antd的name属性,暂时还没有试一个属性应用多个规则是什么样

  1. table组件如果想自定义渲染列,只能使用jsx或者render函数的形式,暂时没有提供模板slot的方式,

具体原因请看:github.com/TuSimple/na… 确实,我平时用的render函数的方式也更多一些,但是感觉为了更好的推广,要是支持slot的形式可能更好一些,还有在使用render方法的时候,传入的每行的数据都是组件库的RowData的类型,如下所示:

render: (rowData: RowData, rowIndex: number): VNodeChild 
复制代码

如果没有这个限定,能够使用自己定义的类型就好了,每次都需要转换成自己定义的类型,

rowData as any as DataItem
复制代码

感觉略微有点麻烦,antd就可以直接在使用的时候限定为自己定义的类型比如这样:

 customRender: ({ record }: { record: DataItem }): JSX.Element
复制代码

总结

做了一个todo之后,总体感觉效果很不错,流畅,就是form稍微有点用着不是非常顺,table基本能符合我平时使用习惯,使用体验和antdv有些类似,效果也比较贴近antdv,但是有种清新风格。暂时还是观察一段时间再说,现在还不敢应用到正式项目中,自己项目可以用用,尝鲜踩坑倒是没有啥太大的问题。

代码地址

githubgithub.com/nabaonan/to…

文章分类
前端
文章标签