資訊專欄INFORMATION COLUMN
摘要：本組件停止維護組件庫請移步小程序組件庫請移步有贊前端大量坑位，內(nèi)推私信基于的移動端組件支持單列多列和聯(lián)級數(shù)據(jù)內(nèi)置時間日期數(shù)據(jù)滾輪效果顏色可配置已啟用試試離線訪問吧點擊查看詳細使用方法參照源碼參數(shù)描述可選類型默認詳細描述
?? DEPRECATED 本組件停止維護
?? Vue 組件庫請移步 Vant
?? 小程序組件庫請移步 Vant Weapp
?? 有贊前端大量坑位，內(nèi)推私信
基于 Vue.js & Better-Scroll 的移動端 picker 組件
Features支持單列、多列和聯(lián)級數(shù)據(jù)
內(nèi)置時間、日期數(shù)據(jù)
滾輪 3D 效果
顏色可配置
DemoPS：Demo 已啟用 Service Worker 試試離線訪問吧
點擊查看 >>
Installationnpm install vue-awesome-picker --saveUsage
/* main.js */ import AwesomePicker from "vue-awesome-picker"; Vue.use(AwesomePicker);
/* 詳細使用方法參照源碼 App.vue */
methods: {
show() {
this.$refs.picker.show();
}
}
Props
| 參數(shù) | 描述 | 可選 | 類型 | 默認 |
|---|---|---|---|---|
| data | 詳細描述見下文 | Array | ||
| anchor | 詳細描述見下文 | Array | ||
| type | 內(nèi)置 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 |
vue-awesome-picker 通過數(shù)據(jù)結(jié)構(gòu)不同來區(qū)分是普通 picker 還是聯(lián)級 picker, 所以請嚴格按照以下數(shù)據(jù)結(jié)構(gòu)進行配置
單列、多列 picker 以雙層數(shù)組的形式傳入 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"] ]
聯(lián)級 picker 通過 children 構(gòu)造出具有層級關(guān)系的數(shù)據(jù)
[
{
value: "A",
children: [
{ value: "A-a" },
{ value: "A-b" },
{ value: "A-c" }
]
},
{
value: "B",
children: [
{ value: "B-a" },
{ value: "B-b" }
]
},
]
anchor
anchor 是 picker 展開時每一列默認滾動的錨點位置或值的數(shù)組, 兼容兩種數(shù)據(jù)結(jié)構(gòu), 未匹配到默認選中第0項
[推薦]數(shù)組對象形式: 與事件 confirm 返回的參數(shù)數(shù)據(jù)結(jié)構(gòu)相同, 對象里可以只存在 index 或 value, 當存在 index 時優(yōu)先匹配 index
[
{
index: 0,
value: "A"
},
{
index: 0,
value: "A-a"
}
]
單層數(shù)組形式: index 組成的數(shù)組
[0, 0]Methods
| 方法 | 描述 |
|---|---|
| show | 展開顯示 picker |
| 事件 | 描述 | 參數(shù) |
|---|---|---|
| confirm | 點擊 confirm 按鈕后觸發(fā) | [{ index: xxx, value: xxx }...] index: 當前選中的 item 在當列的 index value: 當前選中 item 的 value |
| cancel | 點擊 cancel 按鈕后觸發(fā) |
git clone [email protected]:Fyerl/vue-awesome-picker.git cd vue-awesome-picker npm install npm run dev
keywords for seo: js picker, 前端 picker, datepicker, timepicker, vue, picker, vue picker, vue awesome picker, service worker, pwa, vue pwa, npm, vue npm
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93387.html
摘要：概述基于選擇器組件安裝基礎(chǔ)用法選項參數(shù)描述默認值為，控制顯示和隱藏默認值為，顯示的數(shù)組內(nèi)容改變時執(zhí)行的監(jiān)聽函數(shù)參數(shù)描述類型默認值默認選中的索引值賦值的數(shù)組顯示的寬度，單位是顯示數(shù)據(jù)的字段名，默認值是最大的滾動 概述 基于vue.js選擇器組件 github: https://github.com/xiecg/vue-... DEMO vue-picker 安裝 npm install ...
摘要：概述基于選擇器組件安裝基礎(chǔ)用法選項參數(shù)描述默認值為，控制顯示和隱藏默認值為，顯示的數(shù)組內(nèi)容改變時執(zhí)行的監(jiān)聽函數(shù)參數(shù)描述類型默認值默認選中的索引值賦值的數(shù)組顯示的寬度，單位是顯示數(shù)據(jù)的字段名，默認值是最大的滾動 概述 基于vue.js選擇器組件 github: https://github.com/xiecg/vue-... DEMO vue-picker 安裝 npm install ...
摘要：走了一圈都沒有找到自己想要的移動端的的組件，于是自己就下手，擼了一個出來，感受下效果圖。 vue-picker a picker componemt for vue2.0 走了一圈 github 都沒有找到自己想要的移動端的 vue-picker的組件，于是自己就下手，擼了一個出來，感受下效果圖。showImg(https://segmentfault.com/img/remote/...
摘要：最好能使用一套模板渲染前后端的數(shù)據(jù)，也就是模板和某些簡單組件可以同構(gòu)。開發(fā)組件因為需要讓服務(wù)端也能使用，單文件的開發(fā)方式我目前是沒有找到可以讓讀取的方式，所以就暫時放棄了。這種通用組件寫法只適合比較簡單的項目。 項目情況 我使用的是express做為服務(wù)器框架，只需要調(diào)用后臺API接口獲得數(shù)據(jù)，然后把數(shù)據(jù)渲染成html就可以了。最好能使用一套模板渲染前后端的數(shù)據(jù)，也就是模板和某些簡單組...
閱讀 1680·2019-08-30 13:04
閱讀 2234·2019-08-30 12:59
閱讀 1796·2019-08-29 18:34
閱讀 1903·2019-08-29 17:31
閱讀 1282·2019-08-29 15:42
閱讀 3567·2019-08-29 15:37
閱讀 2892·2019-08-29 13:45
閱讀 2800·2019-08-26 13:57
