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

2019-08-28
棄坑一年多，但仍有很多同窗在使用，仍是決定把坑填了，填坑中

----分割線----

⚠️ DEPRECATED 本組件中止維護
⚠️ Vue 組件庫請移步 Vant
⚠️ 小程序組件庫請移步 Vant Weapp
⚠️ 有贊前端大量坑位，內推私信

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 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