Vue-smooth-picker NPM

vue-smooth-picker

🏄🏼 A VueSmoothPicker for Vue 2 & 3

JS gzip size CSS gzip size

Let's more easily select specific data on the touch screen devices, let's go!

Take a look

Screen shot

Screen record

Install

npm i -S vue-smooth-picker@^0.4.0  # for Vue 2

npm i -S vue-smooth-picker@^1.0.0-alpha  # for Vue 3

Usage

English usage docs
中文使用文档

Quick look

// import and use
import 'vue-smooth-picker/dist/css/style.css'
import VueSmoothPicker from 'vue-smooth-picker'
// app is your application instance created by `createApp`
app.use(VueSmoothPicker)
...
// in your template
<VueSmoothPicker ref="smoothPicker" :data="data" @change="change" />

Or see: example files

Event

name	type	default	explain
`change`	`Function`	({ gIndex, iIndex }) => {}	Callback after data current index changed, pass one object, which has two keys, group index `gIndex` and item index `iIndex`

Props

name	type	default	explain
`data`	`Array`	[]	VueSmoothPicker 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

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