Vue2 iOS Style Picker Component

Vue2 iOS Style Picker Component

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

Vue Scroll Picker

vue-js downloads npm-version

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

Examples

Installation

npm i vue-scroll-picker

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="path/to/vue.js"></script>
  <script src="path/to/vue-scroll-picker.js"></script>
  <script>
    new Vue({ el: "#app", })
  </script>
</body>
</html>

Options

Props

Props Type Default Description
value mixed null set value
placeholder String null placeholder
options Array [] options of value. example, ["10KG", "20KG", "30KG"] or [{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]

Event

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

Styling

License

MIT

Github Repository

Tags: #VueJs