xiecg / Vue Picker
The picker component based on vue.js
Stars: ✭ 105
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Picker
Material Ui Color Picker
<ColorInput> component for material-ui
Stars: ✭ 74 (-29.52%)
Mutual labels: picker
Bubble Picker
An easy-to-use animation which can be used for content picking for Android
Stars: ✭ 1,316 (+1153.33%)
Mutual labels: picker
Flutter wechat camera picker
A camera picker in WeChat style.
Stars: ✭ 95 (-9.52%)
Mutual labels: picker
React Native Picker Select
🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
Stars: ✭ 1,229 (+1070.48%)
Mutual labels: picker
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-3.81%)
Mutual labels: picker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+1127.62%)
Mutual labels: picker
Bootstrap Popover Picker
Generic Bootstrap plugin template for building selector components with popovers.
Stars: ✭ 95 (-9.52%)
Mutual labels: picker
Magnetic
SpriteKit Floating Bubble Picker (inspired by Apple Music) 🧲
Stars: ✭ 1,252 (+1092.38%)
Mutual labels: picker
Rc Datetime Picker
React component for datetime picker by Moment.js
Stars: ✭ 85 (-19.05%)
Mutual labels: picker
Multitype Filepicker
This is a light Android file picker library.
Stars: ✭ 1,332 (+1168.57%)
Mutual labels: picker
React Native Bubble Select
An easy-to-use customizable bubble animation picker, similar to the Apple Music genre selection
Stars: ✭ 78 (-25.71%)
Mutual labels: picker
Circularpicker
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter.
Stars: ✭ 73 (-30.48%)
Mutual labels: picker
Materialdaterangepicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker
Stars: ✭ 1,315 (+1152.38%)
Mutual labels: picker
Datepicker
A Date Picker with Calendar for iPhone and iPad Apps.
Stars: ✭ 103 (-1.9%)
Mutual labels: picker
Dkimagepickercontroller
Image Picker Controller for iOS written in Swift 4 & 5.
Stars: ✭ 1,369 (+1203.81%)
Mutual labels: picker
Overview
The picker component based on vue.js
DEMO
Install
npm install vue-3d-picker --save
import picker from 'vue-3d-picker';
Register component:
Vue.component(picker.name, picker);
Base Usage
<picker v-model="visible" :data-items="items" @change="onValuesChange">
<div class="top-content" slot="top-content">Top of the content.</div>
<div class="bottom-content" slot="bottom-content">Bottom of the content.</div>
</picker>
export default {
methods: {
onValuesChange(result1, result2, ... ) {
console.log(result1, result2)
}
},
data() {
return {
visible: true,
items: [
{
values: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007'],
}, {
values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
}
]
}
}
}
Options
Picker Options:
| Option | Description |
|---|---|
| v-model | Boolean(default: false) Picker show and hide. |
| :data-items | Array(default: []) The configuration on the items. |
| @change | Function() Listening when data changes. |
Picker Items Options:
| Option | Description | Type | Default |
|---|---|---|---|
| index | item default index position. | Number | 0 |
| values | values of this item. | Array | [] |
| width | The width of the item. The unit is %. | String | 'flex' |
| name | If values is an object. set the displayed key. | String | 'value' |
| maxScrollValue | The maximum value for scrolling. | Number | values.length |
example
npm install
npm run dev
prompt
Need postcss-salad support
中文
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].