守望先锋 UI 库

[Haixiang]

缘起

去年 12 月玩守望等匹配的时候就无聊萌生出做一套守望 UI 的想法，因为觉得守望的 UI 比较简洁，而且对于那些小组件的实现都有个大概的思路。当时 Hey UI 的作者也在知乎上宣传自己的 UI 库，所以更加坚定了做这个 UI 库的想法。

调研了之后还真发现已经有人用 React 写了 4 个守望的组件了。

他是用 React.js 写的，不过他写不是很全，没有形成一个库。既然没有同类型的产品，那就我来用 Vue.js 搞一个吧。所以今年写完代码高亮插件后，在一些契机下开始动工。

文档

整个库所使用到的有 Vue.js + Karam, Mocha, Chai，可以从 npm 下载试试~

Overwatch UI 文档

Overwatch UI Github

后记

其实整个 UI 库真的有用么？做完之后其实不见得有用 :(，单从设计上来说这个库和网页开发的配合不是那么的好。

因为游戏一般是有鲜明的背影图的，所以它的很多组件都是有透明度的，而网页一般以白色为底，所以组件在网页上有点“看不清”。而且守望的组件 UI 逻辑和网页也不太一样，为了凸显游戏本身它的组件做得很“浅”，再用到网页上就不好看了，但是如果加背景图应该会好点。

虽然没啥用吧，但是收获还是很大的，不仅熟悉了市面上 UI 库的很多 API，也对自己的 Vue.js 有个提升，还有接触到了以前从没有用过的单元测试，当然也被 Vue-cli-3, Karam 等配置坑过几遍。

总之，3 个月的制作过程也是很有趣的，这个库的开发算是告一段落了，

文档官网更新一下: https://haixiang6123.github.io/overwatch-ui-doc/#/

[eric1202]

是一个不错的实践

[mritd]

后端狗，but 还是点个赞

[Haixiang]

@mritd 嘿嘿 谢谢

[iwfan]

发现了一个 bug， 路由切换后，popover 没有关闭。

[Haixiang]

@iwfan 好的 等期末考完修一下 哈哈

[celeron533]

暴雪律师团预备

[mgso]

@celeron533 #6 噗哈哈哈哈哈哈

[haogefeifei]

6666666666

[hirasawayui]

我正打算做一个轻音少女 UI 库。

[qinxi]

文档界面左边背景太花了

[Mac]

你好，自我介绍一下，我是源氏必须死环太平洋组织大中华区上海分区浦东分部南码头支部第三小队副队长。

[fan123199]

666，先 star 一波，再慢慢看代码

[wispx]

赞一个

[elfive]

@Mac 你好我是天使和尚要加强，安娜奶奶接着送，源氏睡死你，湖南电信一区第三中队大队长手下的小喽啰旁边的消防支队长。

[agdhole]

好看

[jeffchen328]

I need healing.

[Kilerd]

第一张图有 4K 的版本吗？

[Kilerd]

从 google 找到了。

[fucker]

👍

[Haixiang]

@qinxi 当时背景确实选得比较随意，后面文档背景色和文字颜色选了半天

[Haixiang]

@celeron533 哈哈 gg

[Haixiang]

@hirasawayui 可以的 加油！

[glaucus]

守望玩家支持，只是不知道有没有版权问题？

[Haixiang]

@glaucus 那就 gg

[Haixiang]

@glaucus 没有盈利应该没事吧哈哈

[Xxss]

nice

[YNaN]

谷里人，点个赞

[tao1991123]

赞一个 O(∩_∩)O 哈哈~

[bokchoys]

赞赞赞

[RyougiShiki]

官网好看

[leoleoasd]

版权问题大概是有的吧 和是否盈利无关吧
加个免责声明吧...

[leoleoasd]

chrome 是支持用 css 定义滚动条的颜色的 可以改一下

[eastlhu]

这个是用来干嘛的啊

[Haixiang]

@leoleoasd 尝试改过 不过在别的浏览器好像不能滚动了

[Haixiang]

@leoleoasd 谢谢提醒 回去改一下否则真 gg 了