vue-min-picker普通选择器，日期选择器，省市区选择器，适用移动端

vue-min-picker

vue-min-picker一共有三种选择器Picker/PickerDate/PickerRegion，【普通选择器】【日期选择器】【省市区选择器】。【日期选择器】与【省市区选择器】是基于【普通选择器】进行开发的出来的。

注：如果需要修改按钮字体颜色，可以用全局的css样式覆盖。

安装：

npm install vue-min-picker -S

使用方式一：全局注册（main.js）

import Vue from 'vue';

import 'vue-min-picker/lib/picker.css';//导入样式
import picker from "vue-min-picker";
Vue.use(picker);//注册3个组件（Picker,PickerDate,PickerRegion）

Vue.config.productionTip = false;
new Vue({
    render: h => h(App),
}).$mount('#app');

使用方式二：局部注册（组件内注册）

1.Picker普通选择器的使用

普通选择器-属性参数

参数	说明	是否必须	类型	默认值
visible	显示/隐藏picker	是	Boolean	false
data	必须是二维数组[[{label:"",value:""}], [{label:"",value:""}]]。 注：如果数据是在Picker组件挂载后或异步生成的，要用this.$set();赋值，否则组件数据不会刷新	是	Array	[[]]
defaultIndex	默认显示的index。Picker组件挂载后或异步获取数据，要用this.$set();赋值	否	Array	[]
cancelText	取消按钮文字	否	String	'取消'
confirmText	确认按钮文字	否	String	'确认'
title	picker标题	否	String	''
maskClick	点击透明遮罩层是否可以关闭	否	Boolean	false

普通选择器-事件说明

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

2.PickerDate日期选择器的使用

日期选择器-属性参数

参数	说明	是否必须	类型	默认值
visible	显示/隐藏picker	是	Boolean	false
initDate	默认显示的日期	否	String	开始的日期
start	开始的日期	否	String	'1900-01-01'
end	结束的日期	否	String	'2100-12-31'
format	日期格式可以为'YYYY'或'YYYY-MM'或'YYYY-MM-DD'	否	String	'YYYY-MM-DD'
cancelText	取消按钮文字	否	String	'取消'
confirmText	确认按钮文字	否	String	'确认'
title	picker标题	否	String	''
maskClick	点击透明遮罩层是否可以关闭	否	Boolean	false

日期选择器-事件说明

参数	说明	是否必须	类型	默认值
cancel	取消选择	否	function	无
confirm	确认选择	否	function(val)	无

3.PickerRegion省市区选择器的使用