https://github.com/k186/pd-select

vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
https://github.com/k186/pd-select

components datepicker mobile mobile-picker npm-package picker scroll scrolling select selector vue vue-components vuejs2 wheel

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/k186/pd-select
• Owner: k186
• License: apache-2.0
• Created: 2017-04-27T01:41:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-04-19T03:08:44.000Z (over 2 years ago)
• Last Synced: 2024-09-27T19:03:49.584Z (about 2 months ago)
• Topics: components, datepicker, mobile, mobile-picker, npm-package, picker, scroll, scrolling, select, selector, vue, vue-components, vuejs2, wheel
• Language: JavaScript
• Homepage: https://k186.github.io/pd-select/
• Size: 326 KB
• Stars: 105
• Watchers: 7
• Forks: 32
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/pd-select.svg)](https://www.npmjs.com/package/pd-select)

## pd-select mobile wheel select 

### [demo](https://www.k186studio.com/demos/iosPicker/)

| 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

  


    

      

      

    

  


  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()

      }

    }

  }

```

### 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](http://okzvi7b4z.bkt.clouddn.com/image/github/buymecoffee/alipay.jpg)

### [how i build this](https://segmentfault.com/a/1190000009276918)

### todo 2.0

支持 点击

touch 事件换hammerjs

~~webapack 构建~~

~~极限 缓动~~

~~支持手动初始化~~