vue-smooth-picker

0.4.2 • Public • Published

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

Package Sidebar

Install

npm i vue-smooth-picker

Weekly Downloads

1,194

Version

0.4.2

License

MIT

Unpacked Size

20.6 kB

Total Files

5

Last publish

Collaborators

  • hiyaliorg