Scroll Picker is a component of the Vue.js 3 mobile picker display that enables the user to select values by spinning the wheels.
vue scroll picker, time picker javascript, wheel style datetime picker component, scrollable date picker jquery, scrolling datepicker html
How to make use of it:
Install and download:
# NPM $ npm i vue3-scroll-picker
1. Import the ScrollPicker component.
import ScrollPicker from 'vue3-scroll-picker';
2. Register the component.
const app = createApp(App);
app.use(ScrollPicker);
// or
export default {
components: {
ScrollPicker,
},
};3. Add the ScrollPicker component to the application template.
<template>
<scroll-picker
:options="options"
v-model="selections"
/>
</template>const myOptions = [
[
{
label: "Option 1-1",
value: "option11"
},
{
label: "Option 1-2",
value: "option12"
},
],
[
{
label: "Option 2-1",
value: "option21"
},
{
label: "B2",
value: "option21"
},
],
// ...
];import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
options: emyOptions,
selections: ['option21','option22'],
});
return {
...toRefs(state),
};
}
});4. All component props.
modelValue: {
default: [],
type: Array as PropType<Selection[]>
},
options: {
default: [],
type: Array as PropType<Option[][]>
},
activeClass: {
default: "",
type: String
},
inactiveClass: {
default: "",
type: String
},
activeStyle: {
default: "",
type: String
},
inactiveStyle: {
default: "",
type: String
},
wheelSpeed: {
default: 1,
type: Number
}Props
| Name | Type | Required | Default | Notes |
|---|---|---|---|---|
| :options | string[][] { label: string; value: string }[][] | yes | [] | Options use can select. label value type: label as display, value to emit label value example: [ [ { label: ‘A1’, value: ‘a1’ }, { label: ‘A2’, value: ‘a2’ } ], [ { label: ‘B1’, value: ‘b1’ } ] ] string type: same label and value string type example: [ [ ‘a1’, ‘a2’ ], [ ‘b1’ ] ] |
| :valueModel | v-model | string[] | yes | [] | Array value emit Example: [ ‘a2’, ‘b1’ ] |
| active-style | string | no | ” | css (change active option style)style |
| inactive-style | string | no | ” | css (change inactive option style)style |
| active-class | string | no | ” | css class |
| inactive-class | string | no | ” | css class |
| wheel-speed | number | no | 1 | adjust mouse wheel speed with this value. lower wheel speed, slower scroller |
Event
| Name | Description |
|---|---|
| @update:modelValue | event emit when use select |
Slot
| Name | prop | Description |
|---|---|---|
| v-slot:option | active: boolean item: string | { label: string; value: string } | override option card |
| v-slot:center-overlay | override center active option area, able to add separator to active area | |
| v-slot:top-overlay | override top inactive option area, able to change the top gradient color | |
| v-slot:bottom-overlay | override bottom inactive option area, able to change the bottom gradient color |
Mobile Picker View, vue3 scroll picker Plugin/Github
See Demo And Download
Official Website(HJ29): Click Here
This superior jQuery/javascript plugin is developed by HJ29. For extra Advanced usage, please go to the official website.
