Vue2 iOS Style Picker Component

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

Vue Scroll Picker

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

Examples

Show Example (sources)

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)

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

rscss
Vue Loader Deep Selector : if you want to override css style, use deep selector in vue-loader!

License

MIT

Github Repository

Tags: #VueJs