https://github.com/VimMing/wepy-one-line-calendar

wepy calendar on-line-calendar 日历组件 单行日历组件
https://github.com/VimMing/wepy-one-line-calendar

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/VimMing/wepy-one-line-calendar
• Owner: VimMing
• Created: 2018-12-30T09:51:11.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-31T06:20:13.000Z (about 6 years ago)
• Last Synced: 2024-07-27T14:33:56.383Z (6 months ago)
• Language: JavaScript
• Size: 332 KB
• Stars: 4
• Watchers: 0
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-wepy - wepy-one-line-calendar：基于 wepy 的单行日历组件

README

        
# wepy-one-line-calendar

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

### 效果图



### 在线小程序码



### 使用

#### 方法一

> 觉得样式还可以的话

```vue

/*********

* 安装

*********/

npm i wepy-one-line-calendar --save

/*********

* 使用

*********/

  

  import wepy from 'wepy'

  import calendar from 'wepy-one-line-calendar'

    export default class Index extends wepy.page {

        components = {

          calendar: calendar

        }

    }

```

#### 方法二

> 自己改造日历

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的实例

 

 ```vue

 

       

         

       

  

 

   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

           }

         }

     }

      

 ```

 

 ### 最后

 欢迎star，pr