# vue-picker

**Repository Path**: fengstyle/vue-picker

## Basic Information

- **Project Name**: vue-picker
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-28
- **Last Updated**: 2023-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

中文 | [English](https://github.com/naihe138/vue-picker/blob/master/README-en.md)


`vue-picker`的组件，囊括了（`普通选择`、`联动选择`、`中国地址选择`）等等常见的picker，兼容PC、移动端，通过简单配置就可以出现一个强大的picker，感受下效果图。


![vue-pick.gif][1]


## Demo(快点去复制代码体验一波吧)

[https://naihe138.github.io/vue-picker/index.html][3]


## Install

`npm install vue-pickers --save` or `yarn add vue-pickers`


## 使用

> 普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用

````javascript
<template>
  <div>
    <button @click="show">show picker</button>
    <VuePicker :data="pickData"
      :showToolbar="true"
      @cancel="cancel"
      @confirm="confirm"
      :visible.sync="pickerVisible"
    />
  </div>
</template>

<script>
  import VuePicker from 'vue-pickers'
  var tdata = []
  for (let i = 0; i < 20; i++) {
    tdata.push({
      label: '第' + i + '行',
      value: i
    })
  }
  export default {
    components: {
      VuePicker
    },
    data () {
      return {
        pickerVisible: false,
        pickData: [
          tdata
        ],
        result: ''
      }
    },
    methods: {
      show () {
        this.pickerVisible = true
      },
      cancel () {
        this.result = 'click cancel result: null'
      },
      confirm (res) {
        this.result = JSON.stringify(res)
      }
    }
  }
</script>
````

## 属性参数说明

参数 | 说明 | 是否必须 | 类型 |默认值
---- | --- | --- | --- | ---
visible | 显示/隐藏picker | 是 | Boolean | false
data | pickerData，多列[data1, data2]  | 是 | Array | []
layer | 联动显示列数  | 否 | Number | 0
defaultIndex | 默认显示的index  | 否 | Number/Array(多列用数组) | 无
cancelText | 取消按钮文字  | 否 | String | '取消'
confirmText | 去确认按钮文字  | 否 | String | '确认'
title | picker标题  | 否 | String | ''
showToolbar | 显示头部  | 否 | Boolean | false
maskClick | 遮罩层是否可以点击关闭  | 否 | Boolean | false
itemHeight | 每一行的高度 | 否 | Number, String | '44px'
rowNumber | 显示多少行(建议单数) | 否 | Number | 5
appendToBody | 是否插入到body中 | 否 | Boolean | false

## 事件说明

参数 | 说明 | 是否必须 | 类型 |默认值
---- | --- | --- | --- | ---
change | 数据变化事件 | 否 | function(val) | 无
cancel | 取消选择 | 否 | function | 无
confirm | 确认选择  | 否 | function(val) | 无


[1]: http://ypimg.naice.me/vue-picker.gif
[3]: https://naihe138.github.io/vue-picker/index.html