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, },
Preview:
Changelog:
v1.1.1 (03/26/2022)
- fix: mousedown
v1.1.0 (06/02/2021)
- feat: add resize
v1.0.1 (03/04/2021)
- fix: support window mouse wheel deltaY
v0.6.1 (03/03/2021)
- refactor: support vue3
v0.6.1 (05/20/2020)
- Reduce height – only show one faded item above and below
Download Details:
Author: wan2land
Live Demo: http://wan2land.github.io/vue-scroll-picker/
Download Link: https://github.com/wan2land/vue-scroll-picker/archive/master.zip
Official Website: https://github.com/wan2land/vue-scroll-picker
Install & Download:
npm install vue-scroll-picker --save