A simple scroll picker plugin for Vue 3

Overview

vue3-scroll-picker

Vue 3 scroll picker plugin.

Demo

Demo

Demo Code

Install

yarn add vue3-scroll-picker
npm i --save vue3-scroll-picker

Register Global Component

import { createApp } from 'vue';
import App from './App.vue'
import ScrollPicker from 'vue3-scroll-picker';

const app = createApp(App);
app.use(ScrollPicker);
app.mount('#app')

Register Local Component

import ScrollPicker from 'vue3-scroll-picker';

export default {
  components: {
    ScrollPicker,
  },
};

Example

<template>
  <scroll-picker  
    :options="options" 
    v-model="selections"
  />
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue';
const exampleOptions = [
  [
    {
      label: "A1",
      value: "a1"
    },
    {
      label: "A2",
      value: "a2"
    },
  ],
  [
    {
      label: "B1",
      value: "b1"
    },
    {
      label: "B2",
      value: "b2"
    },
  ],
];
export default defineComponent({
  setup() {
    const state = reactive({
      options: exampleOptions,
      selections: ['a2','b1'],
    });
    return {
      ...toRefs(state),
    };
  }
});
</script>

Props

Name Type Required Default Notes
:options string[][]
{ label: string; value: string }[][]
yes [] Options use can select.
label value type: label as display, value to emit
label value example: [ [ { label: 'A1', value: 'a1' }, { label: 'A2', value: 'a2' } ], [ { label: 'B1', value: 'b1' } ] ]
string type: same label and value
string type example: [ [ 'a1', 'a2' ], [ 'b1' ] ]
:valueModel | v-model string[] yes [] Array value emit
Example: [ 'a2', 'b1' ]
active-style string no '' css (change active option style)style
inactive-style string no '' css (change inactive option style)style
active-class string no '' css class
inactive-class string no '' css class
wheel-speed number no 1 adjust mouse wheel speed with this value.
lower wheel speed, slower scroller

Event

Name Description
@update:modelValue event emit when use select

Slot

Name prop Description
v-slot:option active: boolean
item: string | { label: string; value: string }
override option card
v-slot:center-overlay override center active option area, able to add seperator to active area
v-slot:top-overlay override top inactive option area, able to change top gradient color
v-slot:bottom-overlay override bottom inactive option area, able to change bottom gradient color

Project setup

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Customize configuration

See Configuration Reference.

Comments
  • There is a problem with mouse scrolling

    There is a problem with mouse scrolling

    eg: the select optios : [1,2,3,4,5,6,7,8] ,when the options length > 3, There is no way to transition from 1 to 2 when scrolling the mouse, and always jump 2 steps

    opened by okssq 4
  • style code affect global style

    style code affect global style

    i find that code will affect the global style!

    ::-webkit-scrollbar { width: 0; height: 5px }

    ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .1); border-radius: 10px }

    can you change your code like that? i coun't!! thank you very much!!!

    [your use className]::-webkit-scrollbar { } [your use className]::-w-webkit-scrollbar-thumb{ }

    opened by okssq 2
  • vue3+vite isFunction is not a function

    vue3+vite isFunction is not a function

    runtime-core.esm-bundler.js:2244 Uncaught TypeError: isFunction is not a function at defineComponent (runtime-core.esm-bundler.js:2244:12) at LocaleReceiver.js:4:16

    opened by KinedYK 0
  • Making it clickable, and embedding on a Carrd website?

    Making it clickable, and embedding on a Carrd website?

    I'm interested in customizing as follows:

    1). I wanna make it so that it goes to the website depending on which subdomain the user scroll picks, as follows:

    2021-10-27 18 16 43

    e.g. here it should go to wa.rner.me If a separate Go button won't work, maybe I could make the scroll option text itself clickable?

    2). I need to embed this is as self-contained HTML embed on a Carrd website. Is it possible to assemble a single HTML file which packages everything you need (like my Accordion which uses Vue JS)?

    opened by w4rner 0
  • problem with android webkit(webview)

    problem with android webkit(webview)

    https://user-images.githubusercontent.com/60599699/121659338-2a3a9e80-cadd-11eb-81c7-ab1a77eb905a.mp4

    it works fine with normal browser and ios webview... but in android it the styling just collapse after a minute of scrolling. any suggestions?

    opened by itsukiuehara 0
Owner
HJ
HJ
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js

vue-mobiscroll A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js Support swipping up / down, mouse dragging up / down , m

茶布多先生 16 May 10, 2022
Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

chenronghui 0 Mar 1, 2021
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

xlaoyu 119 Aug 22, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Aug 29, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Aug 29, 2022
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

abelTO 154 Sep 26, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Aug 29, 2022
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
SkyScroll - A Vue plugin for scroll/resize events and calculations.

SkyScroll A Vue plugin for scroll/resize events and calculations. Description This plugin exposes a handful of useful properties on all Vue instances,

Limbo (formerly Skybrud) 1 Oct 4, 2018
Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

Giorgos Sideris 3 Aug 1, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

Vue3 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll. For simple use-cases, the native scroll-behavior CSS

laineus 23 Aug 16, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

Angelo 24 May 5, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Vue Simple Scroll Trigger

Vue Simple Scroll Trigger Vue.js plugin for GSAP Scroll Trigger What are we talking about We are talking about a Vue component and directive that make

Davide Turrini 0 Mar 21, 2021
Very simple page top scroll seek bar with Vue.js

Very simple page top scroll seek bar with Vue.js

Akira Kanno 0 Nov 21, 2021
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 15 Jun 14, 2022
A minimal, super simple browser scroll library with a convenient set of easy-to-use listeners and animate methods

vert (beta) A minimal, super simple browser scroll library with a convenient set of easy-to-use listeners and animate methods. Vert is optimized using

Christian McCormick 1 Feb 11, 2020