wepy-one-line-calendar v1.0.1

wepy-one-line-calendar

wepy calendar on-line-calendar 日历组件 单行日历组件

效果图

在线小程序码

使用

方法一

觉得样式还可以的话

/*********
* 安装
*********/
npm i wepy-one-line-calendar --save
/*********
* 使用
*********/

#### 方法二
> 自己改造日历
1. 复制本项目下的src/components/calendar.wpy文件, 放到你自己的项目下。
2. calendar.wpy下面的注释写的很详细了， 遇到问题， 欢迎骚扰。

### 组件的emit事件, props属性, slot

#### emit事件

| 事件           |    解释       |
| ------------- |:-------------:| 
| selectDay     |  点击日期时触发 | 
| selectMonth      | 选择年或者月份触发 | 
| userDefineTap | 自定义的slot被tap时触发 |

#### props属性

| 属性           |    解释       |
| ------------- |:-------------:| 
| scheduleNumOfDay     |  日期右上角标数字 [{day: '2018-12-10', num: 4}]|

 #### slot
 

### 实例
> 结合emit, props, slot的实例

```js
<template>
      <Calendar @userDefineTap.user="add" @selectDay.user="selectDay" :scheduleNumOfDay.sync="scheduleNumOfDay">
        <i class="iconfont icon-add" slot="slot"></i>
      </Calendar>
</template> 
<script>
  import wepy from 'wepy'
  import calendar from 'wepy-one-line-calendar'
    export default class Index extends wepy.page {
        components = {
          calendar: calendar
        }
        data = {
          scheduleNumOfDay: [{day: '2018-12-30', num: 5}]
        }
        methods = {
          add(){
            // slot click
          },
          selectDay(dayItem){
            // select day
          }
        }
    }
</script>     

最后

欢迎star，pr