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.
npm i vue-scroll-picker@vue2
Import css file (only version v0.2 or later).
import "vue-scroll-picker/dist/style.css"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,
}
})<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>| Name | Type | Default | Example |
|---|---|---|---|
| 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 |
-
@input: you can usev-model:-)
- rscss
- Vue Loader Deep Selector : if you want to override css style, use deep selector in vue-loader!