Fyerl / Vue Awesome Picker
A Vue.js Picker Component
Stars: ✭ 126
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Awesome Picker
Not Hotdog
Built with TensorFlow, Yolov2 Tiny and React Native | Flutter | Javascript
Stars: ✭ 114 (-9.52%)
Mutual labels: pwa
Generative.fm
A platform for playing generative music in the browser.
Stars: ✭ 1,534 (+1117.46%)
Mutual labels: pwa
Browser Metrics
A collection of metrics tools for measuring performance ⚡️
Stars: ✭ 115 (-8.73%)
Mutual labels: pwa
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-7.14%)
Mutual labels: pwa
Detoxify App
📱🙅 Generate a fake app to replace any addictive app
Stars: ✭ 122 (-3.17%)
Mutual labels: pwa
Knowledge
文档着重构建一个完整的「前端技术架构图谱」,方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。
Stars: ✭ 1,620 (+1185.71%)
Mutual labels: pwa
Nextjs Pwa Graphql Sql Boilerplate
Next.js serverless PWA with GraphQL (Apollo) + Postgres SQL boilerplate
Stars: ✭ 125 (-0.79%)
Mutual labels: pwa
Uvue
Vue CLI plugin to create universal Vue applications with ease
Stars: ✭ 119 (-5.56%)
Mutual labels: pwa
Reactivetradercloud
Real-time FX trading showcase by Adaptive.
Stars: ✭ 1,664 (+1220.63%)
Mutual labels: pwa
Bento Starter
🍱 Full-Stack solution to quickly build PWA applications with Vue.js and Firebase
Stars: ✭ 1,519 (+1105.56%)
Mutual labels: pwa
React Product Card
Animated Product Card with the help of React and SCSS (PWA)
Stars: ✭ 116 (-7.94%)
Mutual labels: pwa
Pwa Barcode Scanner
Information about food from the barcode, on your phone 🛒
Stars: ✭ 122 (-3.17%)
Mutual labels: pwa
React Most Wanted
React starter kit with "Most Wanted" application features
Stars: ✭ 1,867 (+1381.75%)
Mutual labels: pwa
Storefront Integration Sdk
If You like to integrate Vue Storefront - PWA for eCommerce with 3rd party platform, use this SDK
Stars: ✭ 124 (-1.59%)
Mutual labels: pwa
A2hs.js
📲 A useful modern JavaScript solution that helps your website users to add (install) a progressive web application (PWA) to the Home Screen of their mobile iOS devices.
Stars: ✭ 113 (-10.32%)
Mutual labels: pwa
Sample Currency Converter
A sample currency conversion Progressive Web App
Stars: ✭ 119 (-5.56%)
Mutual labels: pwa
Storefront Ui
Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with 💚 by Vue Storefront team and contributors.
Stars: ✭ 1,827 (+1350%)
Mutual labels: pwa
Service Worker Detector
This extension detects if a website registers a Service Worker.
Stars: ✭ 124 (-1.59%)
Mutual labels: pwa
2019-08-28
弃坑一年多,但仍有不少同学在用,还是决定把坑填了,填坑中
vue-awesome-picker
基于 Vue.js & Better-Scroll 的移动端 picker 组件
Features
- 支持单列、多列和联级数据
- 内置时间、日期数据
- 滚轮 3D 效果
- 颜色可配置
Demo
PS:Demo 已启用 Service Worker
Installation
npm install vue-awesome-picker --save
Usage
/* main.js */
import AwesomePicker from 'vue-awesome-picker';
Vue.use(AwesomePicker);
/* 详细使用方法参照源码 App.vue */
<awesome-picker
ref="picker"
:data="picker.data"
:anchor="picker.anchor"
:textTitle="picker.textTitle"
:textConfirm="picker.textConfirm"
:textCancel="picker.textCancel"
:colorTitle="picker.colorTitle"
:colorConfirm="picker.colorConfirm"
:colorCancel="picker.colorCancel"
:swipeTime="picker.swipeTime"
@cancel="handlePickerCancel"
@confirm="handlePickerConfirm">
</awesome-picker>
methods: {
show() {
this.$refs.picker.show();
}
}
Props
参数 | 描述 | 可选 | 类型 | 默认 |
---|---|---|---|---|
data | 详细描述见下文 | Array | ||
anchor | 详细描述见下文 | Array | ||
type | 内置 picker 类型 无需传入 data |
date, time | String | |
textTitle | title 文案 | String | ||
textConfirm | confirm 文案 | String | 确定 | |
textCancel | cancel 文案 | String | 取消 | |
colorTitle | title 颜色 | String | #000000 | |
colorConfirm | confirm 颜色 | String | #42b983 | |
colorCancel | cancel 颜色 | String | #999999 | |
swipeTime | 滚动速度(better-scroll swipeTime) | Number | 1800 |
data
vue-awesome-picker 通过数据结构不同来区分是普通 picker 还是联级 picker, 所以请严格按照以下数据结构进行配置
单列、多列 picker 以双层数组的形式传入 data
[
['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's','t', 'u', 'v', 'w', 'x', 'y', 'z'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z']
]
联级 picker 通过 children 构造出具有层级关系的数据
[
{
value: 'A',
children: [
{ value: 'A-a' },
{ value: 'A-b' },
{ value: 'A-c' }
]
},
{
value: 'B',
children: [
{ value: 'B-a' },
{ value: 'B-b' }
]
},
]
anchor
anchor 是 picker 展开时每一列默认滚动的锚点位置或值的数组, 兼容两种数据结构, 未匹配到默认选中第0项
[推荐]数组对象形式: 与事件 confirm 返回的参数数据结构相同, 对象里可以只存在 index 或 value, 当存在 index 时优先匹配 index
[
{
index: 0,
value: 'A'
},
{
index: 0,
value: 'A-a'
}
]
单层数组形式: index 组成的数组
[0, 0]
Methods
方法 | 描述 |
---|---|
show | 展开显示 picker |
Events
事件 | 描述 | 参数 |
---|---|---|
confirm | 点击 confirm 按钮后触发 | [{ index: xxx, value: xxx }...] index: 当前选中的 item 在当列的 index value: 当前选中 item 的 value |
cancel | 点击 cancel 按钮后触发 |
Development
git clone [email protected]:Fyerl/vue-awesome-picker.git
cd vue-awesome-picker
npm install
npm run dev
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].