Skip to content

huangche007/vue-mobile-picker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-mobile-picker

vue-mobile-picker is a picker for picker in vue,You can easily use this component.

Usage

npm install vue-mobile-picker -S
npm install better-picker --save-dev

How to use?

You can import the whole package or each module individual.

import VueMobilePicker from 'vue-mobile-picker'
Vue.use(VueMobilePicker)

create one you component

<picker :datas="datas" :title="title" @child-info="get"></picker>

this data of datas and title just like this:

Name Type Necessary Desc
datas Array Yes It's a two dimensional
title String No this picker's title
datas:[
        [
            {
                text: '小美',
                value: 1
            },
            {
              text: '猪猪',
              value: 2
            }
        ],
        [
            {
                text: '张三',
                value: 1
            },
            {
                text: '李四',
                value: 2
            },
            {
                text: '王五',
                value: 3
            },
            {
                text: '赵六',
                value: 4
            },
            {
                text: '吴七',
                value: 5
            },
            {
                text: '陈八',
                value: 6
            },
            {
                text: '杜九',
                value: 7
            },
            {
                text: '黄十',
                value: 8
            },
            {
                text: '呵呵',
                value: 9
            },
            {
                text: '哈哈',
                value: 10
            },
            {
                text: '嘿嘿',
                value: 11
            },
            {
                text: '啦啦',
                value: 12
            }
        ],
        [
            {
                text: '开心',
                value: 1
            }, {
                text: '生气',
                value: 2
            },
            {
                text: '搞笑',
                value: 3
            }, {
                text: '难过',
                value: 4
            }
        ]

    ],

How get the choice result

  • just call this method named get:

      get(choiceData){
      	console.log(choiceData)
      }	
    

Single row selection

单选

Multi row selection

多选

Run Demo

  • npm install
  • npm run dev

About

A picker for PC and Mobile in Vue

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published