iOS style scroll picker component for Vue 3. Supports all mouse (also mouse wheel) and touch gestures.
vue native picker ios style, ios style picker jquery, ios picker example, ios dropdown picker, ios wheel picker, figma ios picker, ios picker ui
How to make use of it:
Install and download:
npm install vue-scroll-picker --save
Vue3 Global Recording 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 pluginVue3 Local Registration Guide
<template> <VueScrollPicker :options="options" /> </template>
<script>
import { VueScrollPicker } from 'vue-scroll-picker'
export default {
components: {
VueScrollPicker, // export VueScrollPicker is component
},
}
</script>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 |
Vue2 iOS Style Picker Component, Vue Scroll Picker Plugin/Github
See Demo And Download
Official Website(wan2land): Click Here
This superior jQuery/javascript plugin is developed by wan2land. For extra advanced usage, please go to the official website.
