Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 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 (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-12-19T17:13:27.000Z (6 months ago)
- Last Synced: 2023-12-20T12:11:45.567Z (6 months ago)
- Topics: picker, vue-scroll-picker, vue3
- Language: TypeScript
- Homepage: https://vue-scroll-picker.dist.be
- Size: 5.52 MB
- Stars: 225
- Watchers: 5
- Forks: 29
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Lists
- 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 - 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 - 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 - A scroll picker component for Vue 2.x. Support all gestures of mouse(also wheel) and touch. (Components & Libraries / UI Components)
README
# 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](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
[See Example](http://vue-scroll-picker.dist.be) ([sources](./example))
## Installation
```bash
npm i vue-scroll-picker
```
## Usage
**Global Registration**
[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/lib/style.css";
const app = createApp(); /* */
app.use(VueScrollPicker); // export default is plugin
```
**Local Registration**
[Vue3 Local Registration Guide](https://v3.vuejs.org/guide/component-registration.html#local-registration)
```vue
import { VueScrollPicker } from 'vue-scroll-picker'
export default {
components: {
VueScrollPicker, // export VueScrollPicker is component
},
}
```
## Options
### Props
| Name | Type | Default | Example |
| ----------------- | :------------------------------------------------ | ------------ | ----------------------------------------------------------------------------------------- |
| modelValue | `any` | `null` | |
| placeholder | `string` | `null` | |
| empty | `string` | `'No Items'` | |
| options | `string[]`
`{ name: string, value: any, disabled: boolean }[]` | `[]` | `["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 | `(value: any) => void` |
| start | `() => void` |
| move | `(value: any) => void` |
| end | `(value: any) => void` |
| cancel | `() => void` |
| wheel | `(value: any) => void` |
| click | `(value: any, oldValue: any) => void` |
### Slots
| Name | Prop | Default |
| ----------- | :----------------------------------------- | ------------------- |
| default | `{ option: { name: string, value: any } }` | `{{ option.name }}` |
| placeholder | `{ text: string }` | `{{ placeholder }}` |
| empty | `{ text: string }` | `No Items` |