Press "Enter" to skip to content

iOS Style Scroll Picker Component for Vue 2 & 3

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 plugin

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>

Options

Props

NameTypeDefaultExample
modelValueanynull 
placeholderstringnull 
emptystring'No Items' 
optionsstring[]
{ name: string, value: any }[]
[]["10KG", "20KG", "30KG"]
[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]
dragSensitivitynumber1.7 
touchSensitivitynumber1.7 
scrollSensitivitynumber1 

Events

NameType
update:modelValueany

Slots

NamePropDefault
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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.