基于 vue 的 picker 組件 vue-awesome-picker

Lsnsh 發(fā)布于2019-08-22 15:20 / 3039人閱讀

摘要：本組件停止維護(hù)組件庫請(qǐng)移步小程序組件庫請(qǐng)移步有贊前端大量坑位，內(nèi)推私信基于的移動(dòng)端組件支持單列多列和聯(lián)級(jí)數(shù)據(jù)內(nèi)置時(shí)間日期數(shù)據(jù)滾輪效果顏色可配置已啟用試試離線訪問吧點(diǎn)擊查看詳細(xì)使用方法參照源碼參數(shù)描述可選類型默認(rèn)詳細(xì)描述

?? DEPRECATED 本組件停止維護(hù)
?? Vue 組件庫請(qǐng)移步 Vant
?? 小程序組件庫請(qǐng)移步 Vant Weapp
?? 有贊前端大量坑位，內(nèi)推私信

vue-awesome-picker

基于 Vue.js & Better-Scroll 的移動(dòng)端 picker 組件

Features

支持單列、多列和聯(lián)級(jí)數(shù)據(jù)

內(nèi)置時(shí)間、日期數(shù)據(jù)

滾輪 3D 效果

顏色可配置

Demo

PS：Demo 已啟用 Service Worker 試試離線訪問吧

點(diǎn)擊查看 >>

Installation

npm install vue-awesome-picker --save

Usage

/* main.js */
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);

/* 詳細(xì)使用方法參照源碼 App.vue */

methods: {
  show() {
    this.$refs.picker.show();
  }
}

Props

參數(shù)	描述	可選	類型	默認(rèn)
data	詳細(xì)描述見下文		Array
anchor	詳細(xì)描述見下文		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	滾動(dòng)速度(better-scroll swipeTime)		Number	1800

data

vue-awesome-picker 通過數(shù)據(jù)結(jié)構(gòu)不同來區(qū)分是普通 picker 還是聯(lián)級(jí) picker, 所以請(qǐng)嚴(yán)格按照以下數(shù)據(jù)結(jié)構(gòu)進(jìn)行配置

單列、多列 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)級(jí) picker 通過 children 構(gòu)造出具有層級(jí)關(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í)每一列默認(rèn)滾動(dòng)的錨點(diǎn)位置或值的數(shù)組, 兼容兩種數(shù)據(jù)結(jié)構(gòu), 未匹配到默認(rèn)選中第0項(xiàng)

[推薦]數(shù)組對(duì)象形式: 與事件 confirm 返回的參數(shù)數(shù)據(jù)結(jié)構(gòu)相同, 對(duì)象里可以只存在 index 或 value, 當(dāng)存在 index 時(shí)優(yōu)先匹配 index

[
  { 
    index: 0,
    value: "A"
  },
  {
    index: 0,
    value: "A-a"
  } 
]

單層數(shù)組形式: index 組成的數(shù)組

[0, 0]

Methods

方法	描述
show	展開顯示 picker

Events

事件	描述	參數(shù)
confirm	點(diǎn)擊 confirm 按鈕后觸發(fā)	[{ index: xxx, value: xxx }...] index: 當(dāng)前選中的 item 在當(dāng)列的 index value: 當(dāng)前選中 item 的 value
cancel	點(diǎn)擊 cancel 按鈕后觸發(fā)

Development

git clone git@github.com: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

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93387.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Lsnsh

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

（CSS）不同瀏覽器對(duì)table中visibility屬性顯示的不同

閱讀 1721·2019-08-30 13:04
【翻譯】PostCSS簡(jiǎn)介

閱讀 2278·2019-08-30 12:59
react redux學(xué)習(xí)(一)

閱讀 1845·2019-08-29 18:34
【每日一包0023】concat-stream

閱讀 1951·2019-08-29 17:31
使用Canvas操作像素

閱讀 1346·2019-08-29 15:42
小程序之仿小米商城Lite

閱讀 3669·2019-08-29 15:37
簡(jiǎn)單說用CSS做一個(gè)魔方旋轉(zhuǎn)的效果

閱讀 2956·2019-08-29 13:45
JavaScript：十大排序的算法思路和代碼實(shí)現(xiàn)

閱讀 2848·2019-08-26 13:57

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

基于 vue 的 picker 組件 vue-awesome-picker

相關(guān)文章