pd select

PD選択モバイルホイール選択

デモ

ブラウザ	バージョン
すなわち	> 11
edg	> = 16
Firefox	> = 57
クロム	> = 47
サファリ	> = 11
iOSサファリ	> = 9.3
Android用のChrome	> = 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 ITEMDATA（更新値の変更ビュー）

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

一杯のコーヒーを買ってください

これをどのように構築するか

TODO 2.0

支持点击

タッチ事件换hammerjs

webapack构建

极限缓动支持手动初始化