https://github.com/naihe138/vue-picker

A picker componemt for vue
https://github.com/naihe138/vue-picker

picker-componemt vue vue-picker

Last synced: 11 days ago
JSON representation

A picker componemt for vue

• Host: GitHub
• URL: https://github.com/naihe138/vue-picker
• Owner: naihe138
• License: mit
• Created: 2017-08-29T01:36:59.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T07:23:44.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T04:24:16.548Z (about 1 month ago)
• Topics: picker-componemt, vue, vue-picker
• Language: Vue
• Homepage: https://naihe138.github.io/vue-picker
• Size: 2.28 MB
• Stars: 306
• Watchers: 4
• Forks: 129
• Open Issues: 25
• Metadata Files:
  • Readme: README-en.md
  • License: LICENSE

Awesome Lists containing this project

README

        
English | [中文](https://github.com/naihe138/vue-picker)

A picker componemt for vue2.0

------

![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`

## Use

````javascript

  


    show picker

    

  


  import VuePicker from 'vue-pickers'

  var tdata = []

  for (let i = 0; i < 20; i++) {

    tdata.push({

      label: 'The' + i + 'row',

      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)

      }

    }

  }

````

## Attributes

Attribute | Description | require | Type | Default

---- | --- | --- | --- | ---

visible | show/hide picker | yes | Boolean | false

data | pickerData，colums[data1, data2]  | yes | Array | []

layer | linkage column  | no | Number | 0

defaultIndex | default index  | no | Number/Array(for more colums) | 无

cancelText | cancel text  | no | String | '取消'

confirmText | confirm text  | no | String | '确认'

title | picker title  | no | String | ''

showToolbar | show toolbar  | no | Boolean | false

maskClick | click mask  | no | Boolean | false

itemHeight | height of each row | no | Number, String | '44px'

rowNumber | how many lines to display (singular number recommended) | no | Number | 5

appendToBody | Insert into body | no | Boolean | false

## Events

Event Name | Description | require | Type | Default

---- | --- | --- | --- | ---

change | select change | no | function(val) | -

cancel | cancel button click | no | function | -

confirm | confirm button click  | no | function(val) | -

[1]: http://ypimg.naice.me/vue-picker.gif

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