• Stars
    star
    306
  • Rank 136,456 (Top 3 %)
  • Language Vue
  • License
    MIT License
  • Created about 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A picker componemt for vue

中文 | English

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

vue-pick.gif

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

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

Install

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

使用

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

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

More Repositories

1

GraphQL-demo

🎉Koa + GraphQL + Apollo-Server demo
JavaScript
243
star
2

heroStory

王者荣耀故事站--小程序
JavaScript
164
star
3

naice-blog

😺 新的博客上线啦
Vue
101
star
4

vue-table

a table component for vue2.0
Vue
72
star
5

nvue

master分支:webpack4实现一个vue的打包的项目,incremental: 实现增量模块打包
JavaScript
58
star
6

naice-blog-koa

博客后台node-koa
JavaScript
40
star
7

naice-blog-admin

👏👏👏博客后台管理系统(react-hooks+typeScript)
TypeScript
40
star
8

react-plan

react、 react-router、redux 最佳实践
JavaScript
35
star
9

vue-imageview

A preview image component for Vue3
Vue
33
star
10

hero-story-crawer

王者荣耀故事站 node爬虫
JavaScript
30
star
11

koa-upload

koa upload image
JavaScript
17
star
12

write-vue

自己理解vue源码与核心方法编写,每一个commit对应每个功能点实现
JavaScript
15
star
13

proxy-mvvm

用proxy简单实现一个mvvm
HTML
15
star
14

micro-zone

这是用koa2 react mongoose 等等构建的一个微说说项目
JavaScript
12
star
15

wangdai

网贷网站的一个html小项目
HTML
5
star
16

beauty-vote

这是用vue2.0,vue-router2.0,vuex2.0构建的一个投票小项目~~~~
JavaScript
5
star
17

vue-reactive

实现一下vue3的响应式原理
JavaScript
5
star
18

algorithm-problem

A daily algorithm problem(每天刷一道算法题)
5
star
19

vue2.0-webpack-mui

基于vue2.0手脚架搭建的自定义的,打包框架,多页,单组建,公共文件打包,代码分割。。。。
JavaScript
5
star
20

aboutMe

自我简介-aboutMe
HTML
4
star
21

webpack-notes

一个从基础配置到webpack的实现、loader的编写、plugin的编写的笔记
JavaScript
2
star
22

webgl-courseware

webgl课件
2
star
23

beauty-vote-api

这是用koa2,mongodb,mongoose,构建的投票小项目的后台,利于新手学习
JavaScript
2
star
24

vue-koa-ssr

vue-koa-ssr build a project
JavaScript
2
star
25

node-book-system

这是用node + mongodb + mongoos 构建的一个小型的图书管理系统,麻雀虽小,但是涉及到的却是很全面
JavaScript
2
star
26

canvasRed

canvas微信朋友圈红包小demo
HTML
1
star
27

NeteaseCloudMusic

😝👏Building a desktop music app with electron+vue3.0
JavaScript
1
star
28

write-vuex

vuex实现及简略解析
JavaScript
1
star
29

vue-microfrontends

基于qiankun的微前端,企业级解决方案,包括一键启动、配置公共cdn、公共组件、公共工具方法、事件通讯的包装。
JavaScript
1
star
30

small-talk

一款基于socket.io高颜值的聊天app(A chat app based on socket.io)
JavaScript
1
star
31

nvue-cli

nvue项目的手脚架
JavaScript
1
star
32

vue2.0-mintui

基于 vue2.0全家桶与vue2.0-MintUI框架搭建
Vue
1
star
33

learn-go

学习go的日志
1
star
34

naihe138.github.io

我的博客地址:
HTML
1
star
35

iFirstAg

我的第一个less+angular的小项目,-------
CSS
1
star