保誠-保戶業務員媒合平台
編輯 | 究查 | 歷程 | 原始

Vue Scroll Picker

Downloads Version License VueJS 2.x
dependencies Status devDependencies Status

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.

See Example (sources)

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)

or

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

Event

  • @input : you can use v-model :-)

Styling