Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 3 days ago
JSON representation

🏄🏼 A SmoothPicker for Vue 2 (like native datetime picker of iOS)

Host: GitHub
URL: https://github.com/hiyali/vue-smooth-picker
Owner: hiyali
License: mit
Created: 2017-03-27T11:29:18.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-04-18T08:32:44.000Z (over 1 year ago)
Last Synced: 2024-10-31T06:36:09.040Z (11 days ago)
Topics: awesome, data, datetime, picker, smooth, vue, vue-picker, vue2
Language: Vue
Homepage: https://hiyali.github.io/vue-smooth-picker
Size: 3.66 MB
Stars: 215
Watchers: 6
Forks: 35
Open Issues: 9
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

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