Vue Scroll Picker
iOS Style Scroll Picker Component for Vue 2. Support All Gestures of Mouse(also MouseWheel) and Touch.
If you are using vue 3, please refer to the main.
See Example (sources)
Installation
npm i vue-scroll-picker@vue2
Usage
CSS
Import css file (only version v0.2
or later).
import "vue-scroll-picker/dist/style.css"
ES6
import Vue from "vue"
import VueScrollPicker from "vue-scroll-picker"
Vue.use(VueScrollPicker)
or
import Vue from "vue"
import { ScrollPicker, ScrollPickerGroup } from "vue-scroll-picker"
new Vue({
components: {
ScrollPicker,
ScrollPickerGroup,
}
})
Globals
<html>
<head>
...
</head>
<body>
<div id="app">
<scroll-picker :options="[1, 2, 3, 4, 5]"></scroll-picker>
</div>
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-scroll-picker/dist/index.js"></script>
<script>
new Vue({ el: "#app", })
</script>
</body>
</html>
Options
Props
modelValue | any | null | |
placeholder | string | null | |
empty | string | 'No Items' | |
options | string[]
{ name: string, value: any }[] | [] | ["10KG", "20KG", "30KG"]
[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}] |
dragSensitivity | number | 1.7 | |
touchSensitivity | number | 1.7 | |
scrollSensitivity | number | 1 | |
Event
@input
: you can use v-model
:-)
Styling