01月24, 2018

一些记录与吐嘈

最近处于懒散模式,可能是快放假了,所以产出方面就少了一些,其实最近也没啥可以总结的(在js方面),在css方面倒是有一些。。

这两周就差不多写了两个组件,一个是流程,一个是步骤条。

简单来看一下设计图吧。

a. 流程

alt

alt

alt

alt

b. 步骤条

alt

alt

alt

alt

讲真拿到PSD图,我是崩溃的,因为antd的步骤条是这样的:

alt

将文字那一块block掉,并不能快速改成上面的样式。

在翻elementUI的时候,发现它的steps,有我想要的样式。于是乎,将它的源码改造成react。

其实它的源码实现原理就是flex布局:

alt

另外一个带箭头的步骤条,我参考了千牛UI的样式:

alt

实现思路,就是table-cell布局,箭头是两个div拼在一起,压在后面的一个div上面(通过z-index)。

在折腾了几天之后,也终于搞定。

alt


今天设计又给了我一个日期的组件,截图如下:

alt

而antd的日期组件是生成的绝对定位DIV,是整个盖在input上面的,即:

alt

在沟通之后,设计希望还是能做成设计稿那样,于是乎又得开始阅读源码,最终发现,它是通过一个placement.js来定位的位置:

alt

通过demo,我们能清楚地看到这个位置关系:

alt

如果要改成设计稿那样,就得将第二个tr改为br。然而这个组件并没有开放出来这个配置:

alt

最终还是自己写了一个date-picker,将antd的部分源码拷贝出来,实现之。


有时候会觉得设计挺多事的,为什么不能将就着使用antd的那一套样式?

然而做出设计想要的组件时,还是满满的成就感。通过翻别人的源码,看别人API的设计,确实收获多多。


前几天领导找我谈了一下绩效,给了我一个C,说符合预期,但输出还不够。这个输出可能是指对团队的帮助,比如说分享、培训等。

个人有时候确实会因为讲话这块不是太流畅而略自卑,事实上我在团队中也有过一次分享,好像大家对我的评价还行,可我并不清楚,总以为自己分享的不是太好。

确实来年这一块要多加强一下,改变一下自己。毕竟35之后,就在职场比较难混,纯做技术,也不知道是否行的通。但表达沟通力方面是一个非常非常重要的软技能,而且越往上,领导看重的并不是说你多牛逼,而是看你能否让团队多牛逼。

本文链接:www.my-fe.pub/post/some-records-and-spit-noisy.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。