vue-scroll-picker-vue2
v0.8.2
Published
Scroll Picker Component for Vue.js.
Downloads
3
Readme
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.
Installation
npm i vue-scroll-picker@vue2Usage
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
| 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 | |
Event
@input: you can usev-model:-)
Styling
- rscss
- Vue Loader Deep Selector : if you want to override css style, use deep selector in vue-loader!