vue-ios-roller-picker

A Vue.js component.

demo

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build

install

npm install vue-ios-roller-picker

example

import vueIosRollerPicker from 'vue-ios-roller-picker'

Vue.use(vueIosRollerPicker)

<template>
  <div class="panel">
    <div class="title">
      Time
      <div class="val">
        {{time}}
      </div>
    </div>
    <rollerPickerBox>
      <rollerPicker :data="hours" :index="hourIndex" @change="onHourChange" :options="{loop:true}"></rollerPicker>
      <rollerPicker :data="minutes" :index="minuteIndex" @change="onMinuteChange" :options="{loop:true}"></rollerPicker>
    </rollerPickerBox>
  </div>
</template>

<script>
const getDoubleBitNumber = (n) => {
  return n < 10 ? '0' + n : (n + '')
}
export default {
  data () {
    return {
      hourIndex: 0,
      minuteIndex: 0
    }
  },
  computed:{
    hours () {
      const arr = []
      for (let i = 0; i <= 23; i++) {
        arr.push({value: i, text: getDoubleBitNumber(i)})
      }
      return arr
    },
    minutes () {
      const arr = []
      for (let i = 0; i <= 59; i++) {
        arr.push({value: i, text: getDoubleBitNumber(i)})
      }
      return arr
    },
    time () {
      return this.hours[this.hourIndex].text + ':' + this.minutes[this.minuteIndex].text
    }
  },
  methods: {
    onHourChange (index) {
      this.hourIndex = index
    },
    onMinuteChange (index) {
      this.minuteIndex = index
    }
  }
}
</script>

API

rollerPickerBox props

name	type	explain
layer	Boolean	Show mask or not.
lineColor	String	Sets the color of the selected portion of the border.

rollerPicker props

name	type	explain
data	Array	List of data to be selected. Format: [{text:2019}]
index	Number	Currently selected index.
options	Object	Other configuration.

rollerPicker options

name	type	explain
loop	Boolean	Turn on the loop scroll.
height	Number
width	Number
unitRatio	Number	Angle between each option. Such as Math.PI / 8

rollerPicker event handling

name	arguments	explain
change	index	Returns the index of the currently selected value.

Dependencies

eases stylus stylus-loader