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

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

<template>
    <div></div>
</template>
<script>
import 'vue-min-picker/lib/picker.css';//导入样式(建议全局导入)
import pickers from "vue-min-picker";
let {Picker,PickerDate,PickerRegion} = pickers;
export default {
    name: "Message",
    components:{
        Picker,
        PickerDate,
        PickerRegion,
    },
    data() {
        return {
            
        };
    },
};
</script>

1.Picker普通选择器的使用

<template>
    <div class="Button1">
        <div class="button" @click="visible = true">普通-选择器</div>
        <Picker
            :visible.sync="visible"
            :data="pickData"
            :defaultIndex="defaultIndex"
            title="普通选择器"
            cancelText="取消"
            confirmText=" 确定"
            :maskClick="true"
            @change="change"
            @cancel="cancel"
            @confirm="confirm"
        />
    </div>
</template>
<script>
export default {
    name: "Button1",
    data() {
        return {
            visible:false,
            //pickData:[[{label:`男`,value:0},{label:`女`,value:1}]],
            pickData:[],
            defaultIndex:[0],
        };
    },
    created() {
    },
    mounted() {
        this.$nextTick(function() {
            let arr = [{label:`男`,value:0},{label:`女`,value:1}];
            this.$set(this.pickData, 0, arr);//组件挂载后赋值
            this.$set(this.defaultIndex, 0, 1);//设置默认值（女）
        });
    },
    methods: {
        change(e){
            console.log('e: ', e);
        },
        confirm(e){
            console.log('e: ', JSON.stringify(e));
        },
        cancel(){
            console.log("取消了");
        }
    },
};
</script>

普通选择器-属性参数

| 参数 | 说明 | 是否必须 | 类型 | 默认值 | | :----------- | ------------------------------------------------------------ | :------- | :------ | :----- | | 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日期选择器的使用

<template>
    <div class="Button2">
        <div class="button" @click="visible = true">日期-选择器</div>
        <PickerDate
            :visible.sync="visible"
            :initDate="defaults"
            start="1980-06-12"
            end="2000-12-11"
            format="YYYY-MM-DD"
            title="日期选择器"
            cancelText="取消"
            confirmText=" 确定"
            :maskClick="false"
            @cancel="cancel"
            @confirm="confirm"
        />
    </div>
</template>
<script>
export default {
    name: "Button2",
    data() {
        return {
            defaults:'',
            visible:false,
        };
    },
    mounted() {
        this.$nextTick(function() {
            this.defaults = '1993-06-12';
        });
    },
    methods: {
        confirm(e){
            console.log('确定: ', JSON.stringify(e));
        },
        cancel(){
            console.log("取消了");
        }
    },
};
</script>

日期选择器-属性参数

| 参数 | 说明 | 是否必须 | 类型 | 默认值 | | :---------- | :-------------------------------------------- | :------- | :------ | :----------- | | 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省市区选择器的使用

<template>
    <div class="Button3">
        <div class="button" @click="visible = true">省市区-选择器</div>
        <PickerRegion
            :visible.sync="visible"
            :defaultRegion="defaultRegion"
            customItem="全部"
            title="省市区选择器"
            cancelText="取消"
            confirmText=" 确定"
            :maskClick="false"
            @cancel="cancel"
            @confirm="confirm"
        />
    </div>
</template>
<script>
export default {
    name: "Button3",
    data() {
        return {
            visible:false,
            defaultRegion:"",
        };
    },
    mounted() {
        this.$nextTick(function() {
            this.defaultRegion = "广东省,茂名市,化州市";
        });
    },
    methods: {
        confirm(e){
            console.log('确定: ', JSON.stringify(e));
        },
        cancel(){
            console.log("取消了");
        }
    },
};

省市区选择器-属性参数

| 参数 | 说明 | 是否必须 | 类型 | 默认值 | | :------------ | :--------------------------------------------- | :------- | :------ | :--------------------- | | visible | 显示/隐藏picker | 是 | Boolean | false | | defaultRegion | 默认显示的省市区 | 否 | String | '北京市,北京市,东城区' | | customItem | 可以在每列的顶部，添加一个定义选项【如：全部】 | 否 | String | '' | | cancelText | 取消按钮文字 | 否 | String | '取消' | | confirmText | 确认按钮文字 | 否 | String | '确认' | | title | picker标题 | 否 | String | '' | | maskClick | 点击透明遮罩层是否可以关闭 | 否 | Boolean | false |

省市区选择器-事件说明

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