vue-scroll-picker

Vue Scroll Picker

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)

Local Registration

Vue3 Local Registration Guide

<script>
import { ScrollPicker } from 'vue-scroll-picker'

export default {
  components: {
    ScrollPicker,
  },
}
</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 }[]	[]	["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	any

Slots

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

Styling

• Vue Loader Deep Selector : if you want to override css style, use deep selector!