组件标签



<calendar :loading="loading" :classData="classData" :contentData="contentData" @calendar-date="changeDate"></calendar>


-属性说明

属性名 说明 参数
loading 加载动画 Boolean
classData 作则 Array (指定格式见下文)
contentData 表格数据 Array (指定格式见下文)

classData数据格式

可以携带自定义的参数,但以下为组件必须要求所有属性

        classData:[
            {
                name: '厦门',
                id: '88',
                children: [
                    {
                        name: '精选',
                        id: '74',
                    },
                    {
                        name: '搞定',
                        id: '77',
                    },
                ]
            },
            {
                name: '泉州',
                id: '89',
                children: [
                    {
                        name: '精选',
                        id: '70',
                    },
                    {
                        name: '搞定',
                        id: '78',
                    },
                ]
            },
        ]

clipboard.png

contentData数据格式

可以携带自定义的参数,但以下为组件必须要求所有属性
0/9 = count/targetCount
sunday 当前是否为星期日

注: children.length 必须为当前选择月的天数,不能多少(这里至少举个例子)
children 顺序必须要和左侧分类,以及天数对应。
组件的渲染方式为 一行一行渲染
例如:厦门下的children数组中对应的就是 厦门 - 精选 - 第02天

clipboard.png


classData:[
            {
                name: '厦门',
                id: '88',
                children: [
                    {
                        count: 0,
                        targetCount: 9,
                        sunday: false
                    },
                    {
                        count: 2,
                        targetCount: 9,
                        sunday: false
                    },
                ]
            },
            {
                name: '泉州',
                id: '89',
                children: [
                    {
                        count: 3,
                        targetCount: 9,
                        sunday: false
                    },
                    {
                        count: 1,
                        targetCount: 2,
                        sunday: false
                    },
                ]
            },
        ]

-事件

名称 说明 返回
calendar-date 选择日期下拉完成后 当前当前选择日期 Date类型

效果图:

clipboard.png


lgsn
390 声望5 粉丝