Vue-scroll-picker NPM

Vue Scroll Picker

iOS Style Scroll Picker Component for Vue 2. Support All Gestures of Mouse(also MouseWheel) and Touch.

If you are using vue 3, please refer to the main.

Installation

npm i vue-scroll-picker@vue2

Usage

CSS

Import css file (only version v0.2 or later).

import "vue-scroll-picker/dist/style.css"

ES6

import Vue from "vue"
import VueScrollPicker from "vue-scroll-picker"

Vue.use(VueScrollPicker)

import Vue from "vue"
import { ScrollPicker, ScrollPickerGroup } from "vue-scroll-picker"

new Vue({
  components: {
    ScrollPicker,
    ScrollPickerGroup,
  }
})

Globals

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <scroll-picker :options="[1, 2, 3, 4, 5]"></scroll-picker>
  </div>

  <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="//cdn.jsdelivr.net/npm/vue-scroll-picker/dist/index.js"></script>
  <script>
    new Vue({ el: "#app", })
  </script>
</body>
</html>

Options

Props

Name	Type	Default	Example
modelValue	`any`	`null`
placeholder	`string`	`null`
empty	`string`	`'No Items'`
options	`string[]{ name: string, value: any }[]`	`[]`	`["10KG", "20KG", "30KG"][{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]`
dragSensitivity	`number`	`1.7`
touchSensitivity	`number`	`1.7`
scrollSensitivity	`number`	`1`