demo
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
# build for production with minification
npm run compile
install
npm i pd-select -S
example
import pdSelect from 'pd-select'
Vue.use(pdSelect)
//other code
<template>
<div>
<div>pickedValue: {{month}}</div>
<div>pickedValue: {{day}}</div>
<pd-select-box style="position: fixed;bottom: 0;width: 100%">
<pd-select-item :listData="listData" v-model="month"></pd-select-item>
<pd-select-item :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: 'customValue0'
}
}
}
</script>
props
@param value {String} current select value or init value
@param data {Array} loop array value
@param type {String} 'cycle' ,default 'line'
how i build this
todo 2.0
支持 点击
touch 事件换hammerjs
webapack 构建
极限 缓动