A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/wan2land/vue-scroll-picker below:

wan2land/vue-scroll-picker: iOS Style Scroll Picker Component for Vue 2 & 3. Support All Gestures of Mouse(also MouseWheel) and Touch.

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.

Live Demo (source)

npm install vue-scroll-picker

Vue Scroll Picker can be used both globally and locally in your Vue application. Below are examples of how to set it up.

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

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

To use Vue Scroll Picker in a specific component, import it and register it locally:

Vue3 Local Registration Guide

<script setup>
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)
</script>
<template>
  <VueScrollPicker :options="options" v-model="modelValue" />
</template>
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)
  }
})

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.

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.

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4