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: 3 months 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 8 years ago)
- Default Branch: master
- Last Pushed: 2022-04-19T03:08:44.000Z (over 3 years ago)
- Last Synced: 2025-08-09T13:10:33.337Z (4 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: 106
- Watchers: 6
- Forks: 32
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - @ k186 / PD-选择 - 像Vue 2.x的IOS选择器这样的移动UI组件,可以选择您定义的内容. (UI组件 / 形成)
- awesome-vue - @k186/pd-select - A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined. (Components & Libraries / UI Components)
- awesome-vue - @k186/pd-select ★78 - A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined. (UI Components / Form)
- awesome-vue - @k186/pd-select - A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined. (UI Components / Form)
- awesome-vue - @k186/pd-select - vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮 ` 📝 a year ago` (UI Components [🔝](#readme))
README
[](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
### [how i build this](https://segmentfault.com/a/1190000009276918)
### todo 2.0
支持 点击
touch 事件换hammerjs
~~webapack 构建~~
~~极限 缓动~~
~~支持手动初始化~~