vue components ,like ios 3D pi

Build Setup

# install dependencies npm install # run dev npm run dev install

npm i pd-select -S example

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> props

@param value {String} current select value or init value @param data {Array} loop array value @param type {String} 'cycle' ,default 'line' manual init itemData (update value change view)

use $refs to manual trigger component's init event to update view just like demo Buy me a cup of coffee

支持 点击

touch 事件换hammerjs

webapack 构建

极限 缓动 支持手动初始化