更新记录

1.0.1（2021-10-11） 下载此版本

控制按钮显示属性功能添加

1.0.0（2021-10-11） 下载此版本

日历组件滑动功能完善

平台兼容性

z-calendar

这是一个支持滑动切换，自定义打卡日期，配置项丰富的日历组件。组件样式使用了sass所以需要项目先安装node-sass和sass-loader，如果已经安装可导入之后可直接使用,如果项目支持easycom那么不需要导入即可直接使用。

组件调用方式

1. 如果支持easycom组件模式的话那么可以在你需要的页面直接使用该组件

template

<view>
 <z-calendar
      :firstDayOfWeek="1"
      v-model="checkDate"
      :dotDates="ondutys"
    ></z-calendar>
</view>

script

export default {
  data() {
    return {
      title: "Hello",
      checkDate: new Date(),
      ondutys: [{ date: "2021-10-11" }],
    };
  },
  onLoad() {},
  methods: {},
};

注意 通过v-model可以绑定当前选中日期的值，如果你不需要那么不用也可以

2.如果不支持easycom组件模式，那么在使用之前我们需要先将组件引入
script

import ZCalendar from "../../components/z-calendar/z-calendar.vue";
export default {
  components: {
    ZCalendar,
  },
  data() {
    return {
      title: "Hello",
      checkDate: new Date(),
      ondutys: [{ date: "2021-10-11" }],
    };
  },
  onLoad() {},
  methods: {},
};

组件属性说明props

组件提供了很多自定义属性，比如第一天是显示周一还是周日，打卡日期，打卡日期圆点位置和颜色，控制按钮是否显示，是否允许滑动切换到月份，更多属性如下表。

组件属性说明props

TODO

• [ ] 增加周模式和月模式切换

联系

有问题可以在以下评论区评论，或者邮件wallowyou@outlook.com