Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/hiyali/vue-smooth-picker

πŸ„πŸΌ A SmoothPicker for Vue 2 (like native datetime picker of iOS)
https://github.com/hiyali/vue-smooth-picker

awesome data datetime picker smooth vue vue-picker vue2

Last synced: about 1 month ago
JSON representation

πŸ„πŸΌ A SmoothPicker for Vue 2 (like native datetime picker of iOS)

Lists

README 

        
# vue-smooth-picker  [![Version Badge](http://versionbadg.es/hiyali/vue-smooth-picker.svg)](https://npmjs.com/package/vue-smooth-picker)

πŸ„πŸΌ A SmoothPicker for Vue 2



[![travis build](https://img.shields.io/travis/hiyali/vue-smooth-picker/master.svg)](https://travis-ci.org/hiyali/vue-smooth-picker)

[![NPM downloads](http://img.shields.io/npm/dt/vue-smooth-picker.svg)](https://npmjs.org/package/vue-smooth-picker)

![JS gzip size](http://img.badgesize.io/hiyali/vue-smooth-picker/gh-pages/dist/smooth-picker.js.svg?compression=gzip&label=gzip:%20JS)

![CSS gzip size](http://img.badgesize.io/hiyali/vue-smooth-picker/gh-pages/dist/css/style.css.svg?compression=gzip&label=gzip:%20CSS)



[![NPM Description](https://nodei.co/npm/vue-smooth-picker.png?downloads=true&stars=true)](https://npmjs.org/package/vue-smooth-picker)



> Let's more easily select some data on the touch screen device, such as time / city / gender / seat number / product / ...



## Take a look



Demo links:

[Product](https://hiyali.github.io/vue-smooth-picker/example/product)

| [Datetime](https://hiyali.github.io/vue-smooth-picker/example/datetime)

| [Gender](https://hiyali.github.io/vue-smooth-picker/example/gender)



Demo code links:

[Product](https://github.com/hiyali/vue-smooth-picker/tree/gh-pages/example/product)

| [Datetime](https://github.com/hiyali/vue-smooth-picker/tree/gh-pages/example/datetime)

| [Gender](https://github.com/hiyali/vue-smooth-picker/tree/gh-pages/example/gender)



![Screen shot](https://raw.githubusercontent.com/hiyali/vue-smooth-picker/gh-pages/assets/smooth-picker-screenshot.png "screenshot")



![Screen record](https://raw.githubusercontent.com/hiyali/vue-smooth-picker/gh-pages/assets/smooth-picker-screen-record.gif "screen record")



## Install



```shell

npm i -S vue-smooth-picker

```



## Usage



> [English usage docs](https://github.com/hiyali/vue-smooth-picker/wiki/Usage)



> [中文使用文摣](https://github.com/hiyali/vue-smooth-picker/wiki/Usage_zh)



### Quick look



```javascript

// import and use

import 'vue-smooth-picker/dist/css/style.css'

import SmoothPicker from 'vue-smooth-picker'

Vue.use(SmoothPicker)

...

// in your template



```

Or see: [example files](https://github.com/hiyali/vue-smooth-picker/blob/gh-pages/example/gender/)



## props



| name                       | type       |  default      | explain                          |

| :------------------------- | :--------- | :------------ | :------------------------------- |

| `change`                   | `Function` | (gIndex, iIndex) => {} | Callback after data current index changed, pass two arguments, group index `gIndex` and item index `iIndex` |

| `data`                     | `Array`    | []            | SmoothPicker initial data        |

| `data[i].currentIndex`     | `Number`   | 0             | Current index of this group's list |

| `data[i].flex`             | `Number`   | 1             | Group weights in parent width `1..12` |

| `data[i].list`             | `Array`    | -             | List of the group                |

| `data[i].list[j]`          | `String` or `Object` | -   | Item in the list of group, use `value` key when it is a object item |

| `data[i].onClick`          | `Function` | -             | Click event on the middle layer of this group, pass two arguments, this group index `gIndex` and selected index `iIndex` of this group |

| `data[i].textAlign`        | `String`   | -             | `left` `center` or `right` in item block |

| `data[i].className`        | `String`   | -             | Your custom class name for this group |

| `data[i].divider`          | `Boolean`  | false         | If it is true, then `onClick` `list` `currentIndex` will be not used |

| `data[i].text`             | `String`   | -             | Just used when `divider` is true |



## Instance methods



| name                       | type               | explain                          |

| :------------------------- | :----------------- | :------------------------------- |

| `setGroupData`             | `Function` => void | Dynamically set a group data with two arguments `(gIndex, gData)`, group index and group data (see props `data[i]`) |

| `getCurrentIndexList`      | `Function` => []   | Return a `Array` of the groups current index list (has divider current index, and it is default to `0`) |

| `getGroupsRectList`        | `Function` => void | Get some info for gesture, you can call this function when the component displayed if the component is hidden when it's initialization |



## Development



```shell

npm run dev # development

npm run build # build

```



## Examples



> See branch gh-pages.



## Any problem?



> Please let me know.

* [Open a new issue for this repo](https://github.com/hiyali/vue-smooth-picker/issues)

* [Send a Email to: [email protected]](mailto:[email protected])



## Donate



[![Become a sponser](https://opencollective.com/vue-smooth-picker/individuals.svg?width=890)](https://opencollective.com/vue-smooth-picker#support)



🌚 [A github star ⍟](https://github.com/hiyali/vue-smooth-picker)



## License



MIT