Byted-multi-picker NPM

vue-smooth-picker

🏄🏼 A SmoothPicker for Vue 2

JS gzip size CSS gzip size

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.
Open a new issue for this repo
Send a Email to: hiyali920@gmail.com

Donate

🌚 A github star ⍟

License

MIT

vue

@everything-registry/sub-chunk-1280 @zalastax/nolb-byt

0.5.6

7 years ago