wepy-one-line-calendar
wepy calendar on-line-calendar 日历组件 单行日历组件
效果图
calendar.gif
在线小程序码
wx-calendar.jpg
)
使用
方法一
觉得样式还可以的话
/*********
* 安装
*********/
npm i wepy-one-line-calendar --save
/*********
* 使用
*********/
<template>
<calendar></calendar>
</template>
<script>
import wepy from 'wepy'
import calendar from 'wepy-one-line-calendar'
export default class Index extends wepy.page {
components = {
calendar: calendar
}
}
</script>
方法二
自己改造日历
- 复制本项目下的src/components/calendar.wpy文件, 放到你自己的项目下。
- calendar.wpy下面的注释写的很详细了， 遇到问题， 欢迎骚扰。
组件的emit事件, props属性, slot
emit事件
| 事件 | 解释 |
|---|---|
| selectDay | 点击日期时触发 |
| selectMonth | 选择年或者月份触发 |
| userDefineTap | 自定义的slot被tap时触发 |
props属性
| 属性 | 解释 |
|---|---|
| scheduleNumOfDay | 日期右上角标数字 [{day: '2018-12-10', num: 4}] |
slot
<slot name="slot"></slot>
实例
结合emit, props, slot的实例
<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
github
