1.0.0 • Published 2 years ago

calendar-mobile-vue v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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以星期几为一周开始Number1 到 77
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