picker

picker ui 组件

首先我们需要思考规范组件的使用、提供那些可选参数、可响应哪些事件、以及提供哪些方法。

下面使用picker组件为例，来一步一步的完成自己的ui组件。

项目使用vue框架、按照同样的思路当然也可以切换到react、angular

首先我们来思考picker组件的使用场景，常见的有城市选择、多列联动选择等场景。常常是用户点击一个按钮弹出背景框和picker组。初始化相关样式、数据后，用户操作pickerItem，滑动选择数据，选定后确认或者取消事件。我们可以看到大致就是这样一个过程。

下面我们来一步一步的完成这个组件，最后并不断完善。

使用

1、每次picker被用户改变值的时候change事件
2、组件接受的参数数组 colcumns ，数组可以简单的一元数组/也可能成员为对象的数组
3、有哪些可自定义的参数？ 如确定/取消/中间标题/是否显示toolbar等
哪些我们就先简单的列出组件的使用

组件html结构

先从最简单的开始我们需要一个picker展示的数据

先写组件的html结构,da-picker 是最外层，da-picker__toolbar是picker顶部的确定/取消按钮，da-column是picker外层里面包裹了pickerItem的数据项。da-iframe是picker选中的横条，固定位置的上下1px的横条。

样式

在写一个ui组件的时候，样式库同样重要。这里先不对样式库进行处理，只是先将和picker组件相关的样式放在同一组件之内。