A vue select components like ios 3D picker style

pd-select

A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined.

Build Setup

# install dependencies
npm install

# build for production with minification
npm run compile

install

npm i pd-select -S

example

import pdSelect from 'pd-select'

Vue.use(pdSelect)

//other code

<template>
  <div>
    <div>pickedValue: {{month}}</div>
    <div>pickedValue: {{day}}</div>
    <pd-select-box style="position: fixed;bottom: 0;width: 100%">
      <pd-select-item :listData="listData" v-model="month"></pd-select-item>
      <pd-select-item :listData="listData2" type="cycle" v-model="day"></pd-select-item>
    </pd-select-box>
  </div>
</template>
<script>
  export default{
    name: 'app',
    data () {
      return {
        listData: Array.from({length: 12}, (value, index) => 1 + index),
        listData2: Array.from({length: 30}, (value, index) => 'customValue' + index),
        month: 100,
        day: 'customValue0'
      }
    }
  }
</script>

props

  @param value {String} current select value or init value
  @param data {Array} loop array value
  @param type {String} 'cycle' ,default 'line'

GitHub