shallinta / vue-picker

The picker component based on vue.js

Fork 修改

【2019.9.20】修改了 vue-touch 引用路径，从git直接引用改为从npm依赖。顺便报名修改为 vue-4d-picker

Overview

The picker component based on vue.js

DEMO

vue-picker

Install

npm install vue-4d-picker --save # 修改为 vue-4d-picker

import picker from 'vue-4d-picker'; // 修改为 vue-4d-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

中文

Picker