V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
userKamtao
V2EX  ›  程序员

爆肝 2 个月,写了一款组件库,欢迎体验👏

  userKamtao · 2022-07-26 17:28:32 +08:00 · 11947 次点击
这是一个创建于 853 天前的主题,其中的信息可能已经有所发展或是发生改变。

项目地址

上次在 v2 上公开过,这次正式发布 beta 版,欢迎体验。

技术栈

  • Vue3 + Vite + TypeScript

介绍

  • 内置近 30 多个常用组件,以及全局指令。
  • 使用 TypeScript
  • 支持引入 NPM 包
  • 支持暗黑模式
  • 支持按需加载

特别的

初次写组件库,很多不规范的地方,ts 也不熟练,非常的粗糙,欢迎大佬指出错误和批评。

120 条回复    2022-07-31 12:07:04 +08:00
1  2  
815979670
    1
815979670  
   2022-07-26 17:33:22 +08:00
select 组件下拉的弹窗 没有跟着表单变形 感觉有点别扭 doge
userKamtao
    2
userKamtao  
OP
   2022-07-26 17:34:22 +08:00
@815979670 这个 确实,但是也没办法,因为气泡没法变形,我想想办法哈哈
815979670
    3
815979670  
   2022-07-26 17:37:00 +08:00
@userKamtao 看了一下目前支持的组件 这个风格挺喜欢的 star 了
PerFectTime
    4
PerFectTime  
   2022-07-26 17:40:50 +08:00
小黑子漏出了🐔脚 [:/doge]
joucks
    5
joucks  
   2022-07-26 17:41:11 +08:00
赞,首页有被惊喜到,很有创意
Kimen
    6
Kimen  
   2022-07-26 17:42:07 +08:00
首页不错,已给 star
Geekgogo
    7
Geekgogo  
   2022-07-26 17:43:28 +08:00
单选框的小白点好像不是居中

![]( https://imgur.com/gallery/sA70QSO)
tysb777
    8
tysb777  
   2022-07-26 17:56:11 +08:00
请教一下,首页的礼花炸开这么做呢
userKamtao
    9
userKamtao  
OP
   2022-07-26 17:57:25 +08:00
userKamtao
    10
userKamtao  
OP
   2022-07-26 17:58:13 +08:00
@Geekgogo 我看看 感谢 反馈
userKamtao
    11
userKamtao  
OP
   2022-07-26 17:58:24 +08:00
@PerFectTime 啥 怎么啦?
userKamtao
    12
userKamtao  
OP
   2022-07-26 17:58:34 +08:00
@joucks 谢谢 哈哈
yamedie
    13
yamedie  
   2022-07-26 18:31:17 +08:00
github 按.键看了看源码, 有些坏味道指出一下 (挑刺我最会

数组的 map 被当做 forEach 用
很多地方用了==而没有用===
很多 //@ts-ignore
在:class 之类的动态属性里写复杂的表达式或很长的模板字符串
bthulu
    14
bthulu  
   2022-07-26 19:02:32 +08:00
只想要一个支持上万行数据的表格
yamedie
    15
yamedie  
   2022-07-26 19:09:42 +08:00 via Android
@bthulu handsonTable 、retroGrids (好像叫这个)
某水果城就算了,不买授权没法用,会给你打水印
christin
    16
christin  
   2022-07-26 19:27:08 +08:00 via iPhone
我记得这个,很有趣的一个组件库。
dfkjgklfdjg
    17
dfkjgklfdjg  
   2022-07-26 19:37:19 +08:00
很棒哦,已 Star
savingrun
    18
savingrun  
   2022-07-26 19:41:27 +08:00
挺好看的,star
oldmanong
    19
oldmanong  
   2022-07-26 19:52:55 +08:00 via iPhone
前端确实是造轮子乐园
Aloento
    20
Aloento  
   2022-07-26 19:53:01 +08:00
点进官网一看,45 度视角,看的我好难受(
Zenyet
    21
Zenyet  
   2022-07-26 19:53:38 +08:00   ❤️ 1
说实话比 element 的好看。。不错。
zhiyu1998
    22
zhiyu1998  
   2022-07-26 20:06:57 +08:00
可以,已 Star
frankwei777
    23
frankwei777  
   2022-07-26 20:09:39 +08:00
抽屉动画有点慢
YR1044
    24
YR1044  
   2022-07-26 20:13:02 +08:00
官网属实有点炫酷
hryen
    25
hryen  
   2022-07-26 20:15:10 +08:00
很好看,已 star
bybyte
    26
bybyte  
   2022-07-26 20:33:38 +08:00
主页很好看
zqguo
    27
zqguo  
   2022-07-26 20:44:20 +08:00
这个文档用什么搭的?酷炫
userKamtao
    28
userKamtao  
OP
   2022-07-26 20:46:34 +08:00
@yamedie 哈哈哈,谢谢 真的非常感谢,欢迎继续挑刺
CoderLife
    29
CoderLife  
   2022-07-26 20:59:34 +08:00
很不错
stkstkss
    30
stkstkss  
   2022-07-26 21:05:30 +08:00
start
ginakira
    31
ginakira  
   2022-07-26 22:24:55 +08:00
看到个小问题,官网首页按钮那部分:Cacal -> Cancel
userKamtao
    32
userKamtao  
OP
   2022-07-26 22:39:26 +08:00
@zqguo 哈哈 自己写的
lopda
    33
lopda  
   2022-07-27 00:09:03 +08:00 via Android
按钮的字体是不是没居中对齐,手机上看。😄
lopda
    34
lopda  
   2022-07-27 00:13:06 +08:00 via Android
动态样式写法可以考虑优化下?😄
7gugu
    35
7gugu  
   2022-07-27 01:21:17 +08:00
首页太炫酷了👍
BeforeTooLate
    36
BeforeTooLate  
   2022-07-27 08:38:49 +08:00
官网 45 度视角展现组件我好像在哪看到过,是现在比较流行吗?
Dragonphy
    37
Dragonphy  
   2022-07-27 08:42:59 +08:00   ❤️ 1
我玩偶姐姐呢😔
salmon5
    38
salmon5  
   2022-07-27 10:25:55 +08:00
“爆肝 2 个月”风险有点大,注意身体
Vaspike
    39
Vaspike  
   2022-07-27 10:28:22 +08:00
提个小建议,dialog 模态框延迟感有点高,不知道 option 中有无配置动画时间的参数(可能是我没找到)
sunmoon1983
    40
sunmoon1983  
   2022-07-27 10:53:59 +08:00
帅气
userKamtao
    41
userKamtao  
OP
   2022-07-27 11:32:54 +08:00
@salmon5 确实很危险,但是可能因为年轻不害怕哈哈哈
userKamtao
    42
userKamtao  
OP
   2022-07-27 11:33:04 +08:00
@Dragonphy 那个使不得
userKamtao
    43
userKamtao  
OP
   2022-07-27 11:33:19 +08:00
@lopda 欢迎指正哈哈哈有什么好的思路
popok
    44
popok  
   2022-07-27 11:55:27 +08:00
风格很喜欢,收藏了。教练,我也想学前端
dabai0806
    45
dabai0806  
   2022-07-27 13:05:53 +08:00
挺不错的 ui 喜欢的
Dragonphy
    46
Dragonphy  
   2022-07-27 13:30:13 +08:00
@userKamtao #42
总得异常「突出」的地方😎
jack778
    47
jack778  
   2022-07-27 13:41:37 +08:00
感觉做这个最大的用处就是面试加分
macy
    48
macy  
   2022-07-27 13:52:44 +08:00
model 卡顿,建议优化下性能
userKamtao
    49
userKamtao  
OP
   2022-07-27 14:06:27 +08:00
@macy 可能是毛玻璃导致的
userKamtao
    50
userKamtao  
OP
   2022-07-27 14:06:48 +08:00
@Dragonphy 不好吧哈哈哈哈
litujin1123
    51
litujin1123  
   2022-07-27 14:44:33 +08:00
已 fork
emric
    52
emric  
   2022-07-27 14:53:04 +08:00
八错。
WindWarrior
    53
WindWarrior  
   2022-07-27 16:02:14 +08:00
非前端。官网 popover 按钮点提交之后按 ESC ,然后再把鼠标移到组件上会出现奇怪的悬浮框。
userKamtao
    54
userKamtao  
OP
   2022-07-27 16:40:27 +08:00
@WindWarrior 谢谢好兄弟 我去修一下
FishLotte
    55
FishLotte  
   2022-07-27 16:41:29 +08:00 via iPhone
tooltip 感觉可以添加一个文本超出校验参数,很多项目都使用 tooltip 替代原本的 title
johnnyNg
    56
johnnyNg  
   2022-07-27 17:00:03 +08:00
弹窗组件有点卡,不知道是动画的原因,还是性能原因
thulof
    57
thulof  
   2022-07-27 17:06:29 +08:00
研究了一下官网的实现原理,学习到了一个新属性:perspective ,感谢楼主
yl20181003
    58
yl20181003  
   2022-07-27 17:13:25 +08:00   ❤️ 1
针不戳,蹲一个 react 版本
userKamtao
    59
userKamtao  
OP
   2022-07-27 17:15:43 +08:00
@johnnyNg 也许是毛玻璃的滤镜的问题,但是我的电脑看着不卡呀哈哈哈,我研究一下,谢谢~
iosyyy
    60
iosyyy  
   2022-07-27 17:20:39 +08:00
我算是半个前端 我觉得 Material Design 是未来 ui 的正解 具体可以参考[Material ui]( https://mui.com/zh/material-ui/react-button/) 是真的好看
AllenDarwin
    61
AllenDarwin  
   2022-07-27 17:27:19 +08:00
小黑子+1
simuhunluo
    62
simuhunluo  
   2022-07-27 17:33:33 +08:00
抽屉有点点卡
Terry05
    63
Terry05  
   2022-07-27 17:41:01 +08:00
弹窗卡是因为背景遮罩用了 blur 的毛玻璃滤镜,这效果还是少用,问题很多,很影响性能,只建议在小范围使用
tsingwong
    64
tsingwong  
   2022-07-27 17:53:57 +08:00
star 了 ,学习学习
mingsz
    65
mingsz  
   2022-07-27 18:00:35 +08:00
不错 star 了
firhome
    66
firhome  
   2022-07-27 18:12:30 +08:00
请问一下你这个 组件库的 文档展示是用工具生成的吗?
Tanix2
    67
Tanix2  
   2022-07-27 18:15:12 +08:00
官网没有滚动条,得缩放才能看到全部
Twinkle
    68
Twinkle  
   2022-07-27 18:24:12 +08:00
文档里还有 Naive UI 相关的文字,可以排除下
userKamtao
    69
userKamtao  
OP
   2022-07-27 18:47:57 +08:00
@Twinkle 哈哈哈没关系的,反正实现方式和 naive 完全不一样,只是 icon 用了 naive 作者开源的
Charod
    70
Charod  
   2022-07-27 18:52:29 +08:00
这,卷出花❀了
huangzhe8263
    71
huangzhe8263  
   2022-07-27 18:57:31 +08:00
赞一个,不过首页显示不全

另外捉虫两处:warning 和 cancel 首页都拼错了
yuekcc
    72
yuekcc  
   2022-07-27 18:58:13 +08:00
来一个星星
ThinkPad93
    73
ThinkPad93  
   2022-07-27 21:17:02 +08:00
op ,button 组件没有开启 loading ,::after 也运用了动画
FreeEx
    74
FreeEx  
   2022-07-27 21:22:05 +08:00
非常厉害,不过我个人感觉 [反馈] 下面的几个组件还需要再优化一下。

1. Alert 的标题和内容字体大小区别太小了。
2. Message 和 Notification 感觉过于简陋了。
LiuJiang
    75
LiuJiang  
   2022-07-27 21:32:29 +08:00
很赞
huijiewei
    76
huijiewei  
   2022-07-27 21:53:26 +08:00
https://agile-ui.vercel.app/

我也在搞 React 的。好几个月了,光方案就换了好几套。
v2eros
    77
v2eros  
   2022-07-27 21:55:17 +08:00
首页第一眼就非常喜欢
Aloento
    78
Aloento  
   2022-07-27 22:01:04 +08:00
@iosyyy fluentui 表示不服
jinliming2
    79
jinliming2  
   2022-07-27 22:34:09 +08:00
组件示例里点了点,FancyImage 里一不小心发现两个 bug:
1. 点开一张图片,然后点击空白处关闭;点开一张图片,点右边箭头切换到下一张,再点击空白处关闭。这两个的关闭效果不一致。
2. 选中页面中的任意一段文字,然后再点开一张图片,这时候没办法点击空白处关闭了。
vevlins
    80
vevlins  
   2022-07-27 22:40:09 +08:00
挺不错的
sunnysign
    81
sunnysign  
   2022-07-27 22:40:49 +08:00
轮子一个又一个
phxsuns
    82
phxsuns  
   2022-07-27 22:42:32 +08:00
组件挺好的。你肝还好吗?
qrobot
    83
qrobot  
   2022-07-27 23:04:10 +08:00
@bthulu #14 https://ui.lif.ink/components/data/table#__demo__-simple-2 欢迎体验.

支持上万行的表格
zhuang0718
    84
zhuang0718  
   2022-07-27 23:07:01 +08:00
已 star
fengsi
    85
fengsi  
   2022-07-27 23:17:43 +08:00
这个组件库风格好喜欢,op 有移植到 react 平台的打算吗
nanxiaobei
    86
nanxiaobei  
   2022-07-27 23:24:37 +08:00
不错!
Archeb
    87
Archeb  
   2022-07-27 23:28:37 +08:00
不错,很好看
bthulu
    88
bthulu  
   2022-07-28 08:15:25 +08:00
@qrobot 关注了, 你写的吗?
qrobot
    89
qrobot  
   2022-07-28 08:34:24 +08:00
@bthulu 是的, 如果你用起来有什么地方不满意可以随时跟我说,我可以进行调整, 我自己试了试至少 1w 条数据是没有问题的,但是要考虑列有多少
qrobot
    90
qrobot  
   2022-07-28 08:35:19 +08:00
@bthulu 我自己的要求是 性能 + 功能强大, 但是还有很多功能还没有做, 比如可展开, 表格单元格合并什么的
ACVV
    91
ACVV  
   2022-07-28 08:38:09 +08:00
风格不错
hunter0122
    92
hunter0122  
   2022-07-28 09:49:53 +08:00
小黑子
YSMAN
    93
YSMAN  
   2022-07-28 09:53:27 +08:00
赞阿
suyuyu
    94
suyuyu  
   2022-07-28 10:03:02 +08:00 via iPhone
你个小黑子,老子专门上号给你点赞
licript
    95
licript  
   2022-07-28 10:16:12 +08:00
挺好看的 学习学习
kkjinping
    96
kkjinping  
   2022-07-28 10:54:36 +08:00
优秀啊
nitmali
    97
nitmali  
   2022-07-28 11:41:51 +08:00
DatePicker 非自动关闭得加个防抖
miyuki
    98
miyuki  
   2022-07-28 11:44:41 +08:00
好看点赞

你们 windows 下看首页感觉糊吗😂
laoxigua
    99
laoxigua  
   2022-07-28 11:53:03 +08:00
小黑子,这竟然不埋个彩蛋?
https://imgur.com/qArQMPx
sarices
    100
sarices  
   2022-07-28 12:04:16 +08:00
支持,已 star ,但没有什么出彩的地方,希望能再接再厉
1  2  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3809 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 29ms · UTC 10:37 · PVG 18:37 · LAX 02:37 · JFK 05:37
Developed with CodeLauncher
♥ Do have faith in what you're doing.