Mobile Picker View For Vue 3 - Scroll Picker

Install & Download:

# NPM
$ npm i vue3-scroll-picker

Description:

Scroll Picker is a Vue.js 3 mobile picker view component that enables the user to select values by rotating the wheels.

How to use it:

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 app 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),
    };
  }
});

3. 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
}