Skip to content

iOS Style Scroll Picker Component for Vue 2 & 3. Support All Gestures of Mouse(also MouseWheel) and Touch.

Notifications You must be signed in to change notification settings

wan2land/vue-scroll-picker

Repository files navigation

Vue Scroll Picker

Build Downloads Version License VueJS 3.x Language Typescript

iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.

If you are using vue 2, please refer to the v0.x branch.

See Example (sources)

Installation

npm i vue-scroll-picker

Usage

Global Registration

Vue3 Global Registration Guide

import { createApp } from "vue";
import VueScrollPicker from "vue-scroll-picker";

import "vue-scroll-picker/lib/style.css";

const app = createApp(); /* */

app.use(VueScrollPicker); // export default is plugin

Local Registration

Vue3 Local Registration Guide

<template>
  <VueScrollPicker :options="options" />
</template>
<script>
import { VueScrollPicker } from 'vue-scroll-picker'

export default {
  components: {
    VueScrollPicker, // export VueScrollPicker is component
  },
}
</script>
<style src="vue-scroll-picker/lib/style.css"></style>

Options

Props

Name Type Default Example
modelValue any null
placeholder string null
empty string 'No Items'
options string[]
{ name: string, value: any, disabled: boolean }[]
[] ["10KG", "20KG", "30KG"]
[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]
dragSensitivity number 1.7
touchSensitivity number 1.7
scrollSensitivity number 1

Events

Name Type
update:modelValue (value: any) => void
start () => void
move (value: any) => void
end (value: any) => void
cancel () => void
wheel (value: any) => void
click (value: any, oldValue: any) => void

Slots

Name Prop Default
default { option: { name: string, value: any } } {{ option.name }}
placeholder { text: string } {{ placeholder }}
empty { text: string } No Items