爆肝 2 个月,写了一款组件库,欢迎体验 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
userKamtao
V2EX    程序员

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

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

项目地址

上次在 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
我记得这个,很有趣的一个组件库。
94
    17
94  
   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 ,::afte 也运用了动画
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     Solana     4519 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 38ms UTC 04:04 PG 12:04 LAX 21:04 JFK 00:04
Do have faith in what you're doing.
ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86