1.0.0 • Published 2 years ago
calendar-mobile-vue v1.0.0
calendar-mobile-vue
- 基于vue的移动端日历组件
- 支持月和周模式的切换
- 滑动和切换模式都有较好的动画效果
提供自定义类、slot和方法,满足自定义的需求
参考了vue-hash-calendar,这里表示感谢
图例和demo
基础功能:
其他功能可查看demo:复制此仓库代码,安装依赖然后运行即可查看其他功能的示例
github: calendar-mobile-vue
安装
npm i calendar-mobile-vue -S
引入
在 main.js 中写入以下内容:
import Vue from 'vue'
import App from './App.vue'
import Calendar from 'calendar-mobile-vue'
import 'calendar-mobile-vue/lib/calendar-mobile-vue.css'
Vue.use(Calendar)
new Vue({
render: h => h(App),
}).$mount('#app')
使用
// 在VUE文件中引入组件
<calendar-mobile-vue></calendar-mobile-vue>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 输入绑定值 | Date | - | 当天时间 |
hideNotCurMonDay | 是否隐藏不是当月的的日期 | Boolean | - | false |
defaultWeekMode | 默认是否是周模式 | Boolean | - | false |
transitionDuration | 动画时间(单位秒) | Number | - | 0.3 |
firstDayOfWeek | 以星期几为一周开始 | Number | 1 到 7 | 7 |
maxDate | 最大日期 | Date | - | - |
minDate | 最小日期 | Date | - | - |
disabledDates | 禁用日期(当类型为Function时,返回true则是表示禁用) | Array, Function(Date) | - | - |
disDateStrategy | 当滑动时选中的日期为禁用日期时提供的策略,此方法需要返回一个Date,如果滑动后选择的日期是禁用日期,此方法返回的Date将成为滑动后新的选中日期而不是默认的滑动后的日期,参数时默认选中的禁用日期 | Function(Date) | - | - |
disabledScrollDir | 禁用的滑动方向(当类型为Array时,值可以为可选值的任意搭配) | String,Array | 'left','right','up','down' | - |
dateClassName | 日期的自定义类 | String | - | - |
disDateClassName | 禁用日期的自定义类 | String | - | - |
todayClassName | 日期为当天的自定义类 | String | - | - |
curDateClassName | 当前选中日期的自定义类 | String | - | - |
notCurMonDateClassName | 不是本月日期的自定义类 | String | - | - |
Slots
name | 说明 |
---|---|
header | 头部内容 |
weekday | 周所在行的显示内容 |
day | 日期显示内容(参数为:{ dateType, date }, dateType值为‘cur’、‘pre’、’next‘其中之一,date为显示的日期) |
footer | 底部内容 |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 选中日期修改事件 | 选中日期 |
click | 日期点击事件 | 点击日期 |
touchStart | 触摸开始事件 | touch事件的event对象 |
touchMove | 触摸移动事件 | touch事件的event对象 |
touchEnd | 触摸结束事件 | touch事件的event对象 |
slideEnd | 滑动结束事件 | 'left','right','up','down' |
Methods
方法名 | 说明 | 参数 |
---|---|---|
toPre | 滑动到上一页 | - |
toNext | 滑动到下一页 | - |
toToday | 返回到今天 | - |
changeMode | 切换月和周的模式 | - |
1.0.0
2 years ago