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>

普通选择器-属性参数

普通选择器-事件说明

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>

日期选择器-属性参数

日期选择器-事件说明

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("取消了");
        }
    },
};

省市区选择器-属性参数

省市区选择器-事件说明