pd select

PD選擇移動輪選擇

演示

瀏覽器	版本
IE	> 11
EDG	> = 16
Firefox	> = 57
鉻合金	> = 47
野生動物園	> = 11
ios野生動物園	> = 9.3
Chrome for Android	> = 62
三星互聯網	> = 6.2

構建設置

 # install dependencies
npm install

# run dev
npm run dev

安裝

 npm i pd-select -S

例子

 import pdSelect from 'pd-select'

Vue.use(pdSelect)

//other code

<template>
  <div id="app">
    <pd-select-box style="position: fixed;bottom: 0;width: 100%">
      <pd-select-item ref="month" :listData="listData" v-model="month"></pd-select-item>
      <pd-select-item ref="day" :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: 'customValue15'
      }
    },
    mounted(){
      setTimeout(()=>{
        //验证 model 联动
        this.after()
      },3000)
    },
    methods: {
      after () {
        this.day = 'customValue0'
        this.$refs.day.init()
      }
    }
  }
</script>

道具

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

手動init intemdata（更新值更改視圖）

 use $refs to manual trigger component's init event to update view just like demo

給我買一杯咖啡

我如何構建這個

TODO 2.0

支持支持

觸摸事件換hammerjs

Webapack構建

極限極限支持手動初始化