Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 构建~~
~~极限 缓动~~
~~支持手动初始化~~