πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A smooth, iOS-inspired anything picker component for VueJS 2+ applications.

Other

Documentation

vue-smooth-picker Version Badge

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

travis build NPM downloads JS gzip size CSS gzip size

NPM Description

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 | Datetime | Gender

Demo code links: Product | Datetime | Gender

Screen shot

Screen record

Install

npm i -S vue-smooth-picker

Usage

English usage docs

中文使用文摣

Quick look

// import and use import 'vue-smooth-picker/dist/css/style.css' import SmoothPicker from 'vue-smooth-picker' Vue.use(SmoothPicker) ... // in your template <smooth-picker ref="smoothPicker" :data="data" :change="change" />

Or see: example files

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

npm run dev # development npm run build # build

Examples

See branch gh-pages.

Any problem?

Please let me know.

Donate

🌚 A github star ⍟

License

MIT


You May Also Like