dta-wi-lib-vue-scroll-picker
v0.0.6
Published
Scroll Picker Component for Vue.js.
Readme
DTA-WI Vue Scroll Picker
iOS Style Scroll Picker Component for Vue 2. Support All Gestures of Mouse(also MouseWheel) and Touch.
Pre-condition
node.js : v14.15.3 / npm : v6.14.9Installation
npm i dta-wi-lib-vue-scroll-pickerUsage
CSS
Import css file (in "main.js").
import "dta-wi-lib-vue-scroll-picker/dist/style.css"ES6
import Vue from "vue"
import VueScrollPicker from "dta-wi-lib-vue-scroll-picker"
Vue.use(VueScrollPicker)or
import Vue from "vue"
import { ScrollPicker, ScrollPickerGroup } from "dta-wi-lib-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:-)@move: emit current scroll indexonMoveevent
Styling
- rscss
- Vue Loader Deep Selector : if you want to override css style, use deep selector in vue-loader!