https://github.com/wan2land/vue-scroll-picker
iOS Style Scroll Picker Component for Vue 2 & 3. Support All Gestures of Mouse(also MouseWheel) and Touch.
https://github.com/wan2land/vue-scroll-picker
picker vue-scroll-picker vue3
Last synced: 7 months ago
JSON representation
iOS Style Scroll Picker Component for Vue 2 & 3. Support All Gestures of Mouse(also MouseWheel) and Touch.
- Host: GitHub
- URL: https://github.com/wan2land/vue-scroll-picker
- Owner: wan2land
- Created: 2017-09-15T08:56:01.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-05-08T11:37:26.000Z (7 months ago)
- Last Synced: 2025-05-08T12:36:46.854Z (7 months ago)
- Topics: picker, vue-scroll-picker, vue3
- Language: Vue
- Homepage: https://vue-scroll-picker.dist.be
- Size: 7.08 MB
- Stars: 281
- Watchers: 4
- Forks: 38
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vue - vue-scroll-picker - A scroll picker component for Vue 2.x. Support all gestures of mouse(also wheel) and touch. (Components & Libraries / UI Components)
- awesome-vue - vue-scroll-picker - A scroll picker component for Vue 2.x. Support all gestures of mouse(also wheel) and touch. (Components & Libraries / UI Components)
- awesome-vue - vue-scroll-picker - A scroll picker component for Vue 2.x. Support all gestures of mouse(also wheel) and touch. (Components & Libraries / UI Components)
- awesome-vue - vue-scroll-picker - iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch. ` 📝 2 days ago` (UI Components [🔝](#readme))
README
# Vue Scroll Picker
Vue Scroll Picker is an iOS-style scroll picker component for Vue 3. It supports all gestures, including mouse and touch interactions, ensuring a smooth and intuitive user experience.
If you are using Vue 2, please refer to the [v0.x branch](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
[Live Demo](http://vue-scroll-picker.dist.be) ([source](./example))
## Features
- **TypeScript Support**: Uses generics for strict type checking and improved developer experience.
- **Native-like Behavior**: Mimics `` element behavior for consistency.
- **Lightweight & Performant**: Minimal dependencies with optimized rendering.
## Installation
```bash
npm install vue-scroll-picker
```
## Usage
Vue Scroll Picker can be used both globally and locally in your Vue application. Below are examples of how to set it up.
### Global Registration
To register Vue Scroll Picker globally in your Vue application, import it in your main file and apply it as a plugin:
[Vue3 Global Registration Guide](https://v3.vuejs.org/guide/component-registration.html#global-registration)
```js
import { createApp } from "vue";
import VueScrollPicker from "vue-scroll-picker";
import "vue-scroll-picker/style.css";
const app = createApp(); /* */
app.use(VueScrollPicker); // export default is plugin
```
### Local Registration
To use Vue Scroll Picker in a specific component, import it and register it locally:
[Vue3 Local Registration Guide](https://v3.vuejs.org/guide/component-registration.html#local-registration)
```vue
import { VueScrollPicker } from 'vue-scroll-picker'
import "vue-scroll-picker/style.css";
const options = [
{ name: 'Option 1', value: 1 },
{ name: 'Option 2', value: 2 },
{ name: 'Option 3', value: 3 },
]
const modelValue = ref(1)
```
### Nuxt
```ts
import VueScrollPicker from "vue-scroll-picker" // export default is plugin
import 'vue-scroll-picker/style.css'
export default defineNuxtPlugin({
async setup({ vueApp }) {
vueApp.use(VueScrollPicker)
}
})
```
## Options
### Props
Vue Scroll Picker accepts several props to customize its behavior:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `modelValue` | `string \| number \| boolean \| null` | `undefined` | The selected value of the picker. |
| `options` | `Array<{ name: string; value: any; disabled?: boolean }>` | `[]` | The list of options displayed in the picker. |
| `emptyText` | `string` | `'No options available'` | Text displayed when there are no options available. |
| `dragSensitivity` | `number` | `1.7` | Sensitivity of dragging interaction. |
| `touchSensitivity` | `number` | `1.7` | Sensitivity of touch interaction. |
| `wheelSensitivity` | `number` | `1` | Sensitivity of mouse wheel scrolling. |
### Events
Vue Scroll Picker emits several events to notify changes:
| Event | Payload | Description |
|-------|---------|-------------|
| `update:modelValue` | `string \| number \| boolean \| null` | Fired when the selected value changes. |
| `start` | `void` | Fired when interaction starts. |
| `move` | `string \| number \| boolean \| null` | Fired when the selection moves. |
| `end` | `string \| number \| boolean \| null` | Fired when interaction ends. |
| `cancel` | `void` | Fired when interaction is canceled. |
| `wheel` | `string \| number \| boolean \| null` | Fired when using the mouse wheel. |
| `click` | `string \| number \| boolean \| null` | Fired when the picker is clicked. |
### Slots
Vue Scroll Picker provides slots for custom rendering:
| Slot | Props | Description |
|------|-------|-------------|
| `default` | `{ option: { name: string; value: any; disabled?: boolean } }` | Custom rendering for each option. |
| `empty` | `{ text: string }` | Custom rendering when no options are available. |