少女风vue组件库的制作全过程

2020-06-16 06:10:07易采站长站整理
–––––yes基础layout布局–––––yes表单input输入框––––––表单cascader级联选择器yes–––yes–表单form表单––––––表单datepicker日期选择器–––yes––导航tab标签页––yes–––导航step步骤调––––––通知toast提示–yes–yes––通知popover弹出框–––yes––通知modal模态框–yes–yes––其他collapse折叠面板yes–yes–––其他slide轮播图yes–––––其他sticky粘滞––––––

组件设计三要素

props:可以参考饿了么或者antd, 需要从用户的角度考虑怎么使用方便和扩展性好,一般需要校验类型和有效值,设置默认值。
slot:插槽内容分发,使用作用域插槽让slot也可以获得组件内部方法,让用户自定义的内容页能调用组件内部方法,比如popover弹出框中用户想自己加个按钮手动调用关闭。
event: 组件事件。从用户角度考虑,比如datepicker组件中用户想在日期面板被打开或这关闭的时候进行操作。这种一般用在交互类UI组件。

举个例子

复杂组件datepicker开发思路

1、在原有的popover组件上开发

点击一个元素A(输入框)后可以弹出元素B(日期面板)

2、生成日期面板

生成7*6=42个日期,6行是为了确保一个月都能在面板上完整显示。这里计算最方便的做法是用时间戳,计算出这个月第一天时间戳和这一天周几,就可以一次性计算出这42个日期。不用算上个月下个月分三段算,这样的问题是还要考虑边界情况,如刚好出现上一年下一年等,麻烦容易出bug。这42个日期我们在computed用visibleDays表示。