更新记录

1.1.7（2023-01-31） 下载此版本

1.增加年度和月度点击回调事件

1.1.6（2022-11-15） 下载此版本

1. 修改日期切换收缩当前行错乱问题

1.1.5（2022-10-27） 下载此版本

1. 修改日历在小程序和H5下不显示问题

平台兼容性

zui-calendar

使用说明

方法

点击天数据 模态框显示使用说明

Slots插槽弹框插槽参数

Event插槽弹框事件

备注

如果父组件赋值后，子组件值无法更新，则给子组件标签上添加:key="key"值，通过 :key 值变更触发DOM重新渲染

``` javascript
<zui-calendar :key="upDatakey" :list="list" :extraData="extraData" @click-active="clickActive" @click-task="clickTask"></zui-calendar>

```
更新key方式：this.upDatakey = new Date().getTime()，放在方法中即可

插槽方式vue:

``` javascript
<zui-calendar :list="list" :extraData="extraData" @click-active="clickActive" @click-task="clickTask">
    <template slot="task">
        <view>这里边写你自己的布局方式</view>
    </template>
</zui-calendar>
```

vue:

<zui-calendar :list="list" :extraData="extraData" @click-active="clickActive" @click-task="clickTask"></zui-calendar>

• 函数说明

/*  */
export default {
    data() {
        return {
            list: [
                {
                    avatar: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
                    title: '整理会议记录文档1',
                    time: '45分钟',
                    details:'首要任务',
                    date: '10:30'
                },
                {
                    avatar: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
                    title: '整理会议记录文档',
                    time: '45分钟',
                    details:'首要任务',
                    date: '10:30'
                },
                {
                    avatar: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
                    title: '整理会议记录文档',
                    time: '45分钟',
                    details:'首要任务',
                    date: '10:30'
                }
            ],
            upDatakey: '',//为重新渲染DOM值，入不需要则可取消
            extraData:[{date: '2022-7-20', value: '签到', status: true, dot: true, active: false},{date: '2022-7-19', value: '未签到', status: false, dot: true, active: true}]
        }
    },
    methods: {
        // 点击日数方法
        clickActive({year, month, date, index}){
            console.log(year, month, date, index)
        },

        // 点击任务方法
        clickTask({row, index}){
            console.log(row, index)
        }
    }
}

温馨提示

1. 欢迎加入QQ讨论群：869207900

2. 若能帮到你还请点亮5颗小星星以作鼓励哈~