Vue2 Wheel Picker

A vue2.x based development, similar to the ios wheel style selection mobile plug-in, currently support time selection, single choice, multiple choice

Installation

• by npm

$ npm install vue2-wheel-picker

• by yarn

$ yarn add vue2-wheel-picker

Online Demo

Web Site Visit: https://lenvonsam.github.io/vue2-wheel-picker/

Mobile Visit:

Screenshots:

Usage

Global Config

import Vue from 'vue'
import wheelpicker from 'vue2-wheel-picker'
 
Vue.use(wheelpicker)

This plug-in automatically injects $wheelPicker Object and registers global components, including wheelPicker and wheelDatepicker.

Component Config

import { WheelPicker, WheelDatepicker } from 'vue2-wheel-picker/picker' 
export default {
  ...
  components: {
    'wheel-picker': WheelPicker,
    'wheel-datepicker': WheelDatepicker
  }
  ...
}

WheelPicker Properties

<wheel-picker v-model="pickerShow" :listData="list" :listValue="value" :colLen="2" @change="pickChange" :rowKeys="rowKeys"></wheel-picker>

Property	Required	Type	Default	Description
value	false	Boolean	false	to display and close the component
listData	true	Array		to display component's content
listValue	false	Array		to initail the component value and get the selected component value
colLen	false	Number	1	The number of columns displayed by the component
rowKeys	false	Array		Specifies each column object keys
confirmText	false	String	确定	confirm button text
cancelText	false	String	取消	cancel button text
confirmColor	false	String	#3db0fc	confirm button color(rgb,rgba,hex)
cancelColor	false	String	#888	cancel button color(rgb, rgba, hex)
bottomColor	false	String	#ddd	the color of button group bottom line

WheelDatepicker Properties

<wheel-datepicker v-model="datePickerShow" :listValue="dataVal" @change="dateChange"></wheel-datepicker>

Property	Required	Type	Default	Description
value	false	Boolean	false	to display and close the component
dateValue	false	String	YYYY-MM-DD	to initail the component value and get the selected component value, the value format depend on separator
separator	false	String	-	Date separator
yearCount	false	Number	15	The difference between the current year and the beginning year
confirmText	false	String	确定	confirm button text
cancelText	false	String	取消	cancel button text
confirmColor	false	String	#3db0fc	confirm button color(rgb,rgba,hex)
cancelColor	false	String	#888	cancel button color(rgb, rgba, hex)
bottomColor	false	String	#ddd	the color of button group bottom line

Components Methods

Method	params	Required	Descrpiton
change	value	false	return selected value

API Properties

It can also $wheelPicker Object to display wheelPicker and wheelDatepicker.

this.$wheelPicker.show({
  mode: 'date',
  cb (type) {
    console.log('type', type)
  }
})

Common Properties

Properties	Required	Type	Default	Description
mode	false	String	picker	display different mode wheel picker
confirmText	false	String	确定	confirm button text
cancelText	false	String	取消	cancel button text
confirmColor	false	String	#3db0fc	confirm button color(rgb,rgba,hex)
cancelColor	false	String	#888	cancel button color(rgb, rgba, hex)
bottomColor	false	String	#ddd	the color of button group bottom line

Date Mode Properties

Properties	Required	Type	Default	Description
dateValue	false	String	YYYY-MM-DD	to initail the component value and get the selected component value, the value format depend on separator
separator	false	String	-	Date separator
yearCount	false	Number	15	The difference between the current year and the beginning year

Picker Mode Properties

Properties	Required	Type	Default	Description
listData	true	Array		to display component's content
listValue	false	Array		to initail the component value and get the selected component value
colLen	false	Number	1	The number of columns displayed by the component
rowKeys	false	Array		Specifies each column object keys

Api Methods

Method	params	Required	Descrpiton
cb	value	false	return selected value

Examples

Single String Picker

export default {
  data () {
    return {
      listData: ['orange', 'apple', 'banana'],
      listValue: ['apple']
    }
  },
  mounted () {
    this.$wheelPicker.show({
      listData: this.listData,
      listValue: this.listValue,
      cb (value) {
        console.log('picker value:>>', value)
      }
    })
  }
}

Multi Object columns Picker

export default {
  data () {
    return {
      listData: [[{'fruit': 'orange'}, {'fruit': 'banana'}], [{'animal': 'dog'}, {'animal': 'cat'}]],
      listValue: ['orange', 'cat']
    }
  },
  mounted () {
    this.$wheelPicker.show({
      listData: this.listData,
      listValue: this.listValue,
      colLen: this.listData.length,
      // when row type is object, rowkeys must not be null
      rowkeys: ['fruit', 'animal'],
      confirmColor: 'red',
      cb (value) {
        console.log('picker value:>>', value)
      }
    })
  }
}

Date Picker

export default {
  mounted () {
    // when dateValue not set value, the date wheel picker will set current date automatically
    this.$wheelPicker.show({
      mode: 'date',
      cb (value) {
        console.log('picker value:>>', value)
      }
    })
  }
}
 

Using Picker by Component

<template>
<div>
  <button @click="clickMe">点我选择</button>
  <picker v-model="pickerShow" :listData="list" :listValue="value" @change="pickerChange" :rowKeys="rowKeys"></picker>
</div>
</template>

import { WheelPicker } from 'vue2-wheel-picker/picker'
export default {
  data () {
    return {
      listData: ['1', '2', '3', '4', '5', '6'],
      listValue: ['1'],
      pickerShow: false
    }
  },
  components: {
    wheelPicker: WheelPicker
  },
  methods: {
    clickMe () {
      this.pickerShow = true
    },
    pickerChange (val) {
      console.log('choose value', val)
    }
  }
}

TO DO LIST

• China City Picker
• Theme Picker(ios, android...)

License

MIT License