Naive-UI,尤大推荐的Vue组件库

前言

早上坐地铁上班的时候,刷到推特推送了naive组件库有关的信息,点进去看了介绍,觉得不错,就来分享一下

组件库文档地址:www.naiveui.com

值得注意的是,vue作者尤雨溪也推荐了该组件库,star一下蹭蹭的往上涨了(早上看的时候是200多,现在是500+了)

感慨尤大的带货能力,tql了!

naive组件库哪些地方值得学习

言归正传,我们来瞅瞅naive组件库有哪些地方值得学习

  • 首先,用的技术栈都比较新颖 对于前端同学来说,如果找不到好的vue+ts项目,那么这个项目可以fork下来学习学习,组件基本都是tsx,另外项目也用到了vite来做为构建工具

  • 另外一点有有意思的就是css-render

详情可以看看作者的这篇介绍:

css-render,另一种 CSS-in-JS 的方式 https://zhuanlan.zhihu.com/p/126670101

后面的就不细说了,大家可以fork一份学习学习,如果发现问题,也可以提个pr,毕竟是尤大推荐的,会作为vue官方钦定的组件库也不一定啊哈哈,赶紧混pr吧

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue树形复选框是一种常见的UI组件,可以用于展示树形结构的数据,并支持多选功能。Naive-UI是一个基于VueUI组件,提供了丰富的组件和样式,可以方便地实现树形复选框功能。 下面是一个使用Naive-UI组件实现Vue树形复选框的示例: ```vue <template> <div> <n-tree :data="treeData" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" show-checkbox @check-change="handleCheckChange" ></n-tree> </div> </template> <script> import { NTree } from 'naive-ui' export default { components: { NTree }, data() { return { treeData: [ { label: 'Node 1', children: [ { label: 'Node 1-1', children: [ { label: 'Node 1-1-1' }, { label: 'Node 1-1-2' } ] }, { label: 'Node 1-2' } ] }, { label: 'Node 2', children: [ { label: 'Node 2-1' }, { label: 'Node 2-2' } ] } ], defaultExpandedKeys: ['Node 1'], defaultCheckedKeys: ['Node 1-1-1'] } }, methods: { handleCheckChange(checkedKeys) { console.log('Checked keys:', checkedKeys) } } } </script> ``` 在上面的示例中,我们使用了Naive-UI的NTree组件来展示树形数据。通过设置`data`属性传入树形数据,`default-expanded-keys`属性设置默认展开的节点,`default-checked-keys`属性设置默认选中的节点。同时,我们还设置了`show-checkbox`属性来显示复选框,并通过`check-change`事件监听复选框的变化。 你可以根据自己的需求修改`treeData`、`defaultExpandedKeys`和`defaultCheckedKeys`来适配你的数据和默认选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值