calendar-组件使用说明

41次阅读

共计 864 个字符,预计需要花费 3 分钟才能阅读完成。

组件标签



<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',
                    },
                ]
            },
        ]

contentData 数据格式

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

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


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 类型

效果图:

正文完
 0