wepy-one-line-calendar
wepy calendar on-line-calendar 日历组件 单行日历组件
效果图
在线小程序码
使用
方法一
觉得样式还可以的话
/********** 安装*********/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