vue-wheel-select

A simple scrolling select and touch compatible component.

DEMO

Installation

# npm
npm install vue-wheel-select --save

# Yarn
yarn add vue-wheel-select

Usage

Minimal example

<template>
  <div>
    <VueWheelSelect
      v-model="selectedBrand"
      :options="brands"
      allowNullSelection
    />
  </div>
</template>

<script>
  import VueWheelSelect from 'vue-wheel-select';

  export default {
    data () {
      return {
        selectedBrand: null,
        brands: [
          'Scarpa',
          'Black Diamond',
          'La Sportiva',
          'Tenaya',
          'Five Ten',
          'Mad Rock',
          'Evolv',
          'Red Chili',
        ],
      }
    },
    components: {
      VueWheelSelect
    }
  }
</script>

Available props

The component accepts these props:

Attribute	Type	Default	Description
v-model / value	Any	Set or Get selected value (required)
options	Array	null	Select options (required) s
optionHeight	Number	48	Height of a single selectable item
getOptionLabel	Function	Returns the option	Function called to display the label of each options
getOptionKey	Function	Returns the option	Function called to set the option key
allowNullSelection	Boolean	false	Add a null option
nullSelectionMessage	String	'Select an option'	Text to display for the null option