4.选择器(midea-picker)

midea-picker 是原生引入 不需要import导入，可以直接在template中使用

实例

基础用法

<template>
    <div class="content-center">
        <midea-picker
            :class="['app-picker', iPhoneX && 'isIPhoneX']"
            ref="single"
            :config="pickerConfig"
            @mideaPickerChange="onMideaPickerChange"
        >
        </midea-picker>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pickerConfig: {},
            tmpTime:''
        }
    },
    mounted(){
        this.initPinker()
    },
    methods: {
        initPinker(){
            this.pickerConfig = {
                textColor: '#000000', // 选中的字体颜色
                backgroundColor: '#FFFFFF', // picker背景色
                dividerColor: '#CDCDCD', // 分割线颜色
                type: '0', // 0代表普通picker，1代表日期picker, 2代表联动类型
                // itemHeight: 36,
                wheelList: [
                    {
                        index: 0,
                        isLoop: true,
                        selectedTextSize: 21,
                        normalTextSize: 19,
                        label: '', // 单位名字
                        labelTextColor: '#121212', // 单位颜色
                        labelTextSize: '14', // 单位字体大小
                        itemList: Array(...{ length: 24 }).map((v, k) => {
                            return {
                                id: k,
                                name: k < 10 ? `0${k}` : `${k}`,
                                pid: 0,
                            };
                        }),
                    },
                    {
                        index: 0,
                        isLoop: true,
                        selectedTextSize: 21,
                        labelLeftEdge: -50,
                        normalTextSize: 19,
                        label: '', // 单位名字
                        labelTextColor: '#121212', // 单位颜色
                        labelTextSize: '14', // 单位字体大小
                        itemList: Array(...{ length: 60 }).map((v, k) => {
                            return {
                                id: k,
                                name: k < 10 ? `0${k}` : `${k}`,
                                pid: 0,
                            };
                        }),
                    },
                ],
            };
        },
        onMideaPickerChange(ebent){
            console.log(JSON.stringify(event));
            if (event.result === 'success') {
                let data = event.data;
                data = typeof data === 'string' ? JSON.parse(data) : data;
                this.tmpTime = `${data[0].name}:${data[1].name}`;
            }
        }
    }
}
</script>
<style scoped>

.app-picker {
  height: 300px;
  background-color: #fff;
}
</style>

Attributes

Prop	Type	Required	Default	Description
pickerConfig	Object	Y		注1

• 注1 pickerConfig

Prop	Type	Required	Default	Description
textColor	String	N	#000000	选中的字体颜色
backgroundColor	String	N	#FFFFFF	picker背景色
dividerColor	String	N	-	分割线颜色
type	String	N	-	0代表普通picker，1代表日期picker, 2代表联动类型
itemHeight	String	N	36	每一列的高度
wheelList	Array	Y	-	具体配置的数据，可选值注2

注2 wheelList

Prop	Type	Required	Default	Description
index	Number	N	0	起始滚动的位置，默认位置
isLoop	Boolean	N	false	是否循环滚动
selectedTextSize	Number	N	-	选中的字体大小
normalTextSize	Number	N	-	正常的字体大小
label	String	N	-	单位
labelTextSize	String	N	-	单位字体大小
itemList	Array	Y	-	具体滚动的每一项注3

注3 itemList

Prop	Type	Required	Default	Description
id	Number	Y	0	唯一标识
name	String	Y	0	标识展示的具体文字
pid	Number	Y	0	上一级的id，联动

Events

事件名称	说明	回调参数
mideaPickerChange	时间变化的回调