Skip to content
/ pd-select Public

vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮

License

Notifications You must be signed in to change notification settings

k186/pd-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Apr 19, 2022
5daa0c9 · Apr 19, 2022

History

56 Commits
Mar 12, 2018
Mar 12, 2018
Apr 19, 2022
Jan 13, 2019
Mar 12, 2018
Mar 12, 2018
Apr 27, 2017
Mar 12, 2018
Nov 15, 2017
Mar 12, 2018
Mar 9, 2020
Aug 1, 2018
Mar 12, 2018
Jun 10, 2019

Repository files navigation

npm

pd-select mobile wheel select

browser       version      
IE >11
Edg >=16
Firefox >=57
chrome >=47
safari >=11
iOS Safari >=9.3
Chrome for Android >=62
Samsung Internet >=6.2

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

buycoffee

todo 2.0

支持 点击

touch 事件换hammerjs

webapack 构建

极限 缓动 支持手动初始化