iOS Style Picker Component For Vue 3

Install & Download:

npm install vue-scroll-picker --save

Description:

An iOS style scroll picker component for Vue 3, which aims to replace the default scrolling text picker(select). Supports both mouse and touch events.

How to use it:

1. Import and register the component.

// Global
import { createApp } from 'vue'
import VueScrollPicker from 'vue-scroll-picker'
import 'vue-scroll-picker/lib/style.css'
const app = createApp()
app.use(VueScrollPicker)

// Local
import { VueScrollPicker } from 'vue-scroll-picker'
export default {
  components: {
    VueScrollPicker,
  },
}

2. Add the VueScrollPicker component to the app and define your options.

<template>
  <VueScrollPicker :options="options" />
</template>

3. Available props.

options: {
  type: Array as PropType<ScrollPickerOptionable[]>,
  default: () => [],
},
dragSensitivity: {
  type: Number,
  default: 1.7,
},
touchSensitivity: {
  type: Number,
  default: 1.7,
},
scrollSensitivity: {
  type: Number,
  default: 1,
},
empty: {
  type: String,
  default: 'No Items',
},
placeholder: {
  type: String,
  default: null,
},