安装
npm install vue-hori引入
说明: 当前组件只支持局部引入
// import in ***.vue <script> import VueHorizontalCalendar from 'vue-horizontal-calendar'; export default { components: { VueHorizontalCalendar } }
Props
参数名 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
choosedDate | 初始化选中的日期;可接收格式如‘2019/12/01’或‘2019-12-01’或 Date对象实例 | String,Date | new Date() | 否 |
swipeSpace | 点击左右箭头,切换的日期间隔天数;最大值不超过当前组件可显示的天数 | String,Number | 7 | 否 |
choosedDatePos | 当前默认选中的日期所处的位置;('left', 'center','right') | String | left | 否 |
minDate | 最小日期限制;可接收格式如‘2019/12/01’或‘2019-12-01’或 Date对象实例 | String,Date | - | 否 |
maxDate | 最大日期限制;可接收格式如‘2019/12/01’或‘2019-12-01’或 Date对象实例 | String,Date | - | 否 |
highlightedDates | 自定义高亮日期:支持字符串数组,字符串格式为YYYY/MM/DD,如['2021/07/01'];匹配的日期,会有class‘date-highlighted’,可以根据class名,自行定义样式。 | Array | [] | 否 |
choosedItemColor | 选中的日期背景色 | String | rgb(13, 141, 224) | 否 |
todayItemColor | ‘今天’未选中时的背景色 | String | rgba(13, 141, 224, .1) | 否 |
lang | 语言;'zh'(中文), 'en'(英语), 'es'(西班牙语), 'it'(意大利语), 'fr'(法语), 'de'(德语) | String | zh | 否 |
sundayText | 星期天的中文字;仅当lang属性为zh时有效 | String | 日 | 否 |
showBorderTop | 是否显示日历组件的顶部边框 | Boolean | true | 否 |
resizeable | 屏幕尺寸改变时,是否重绘日历组件 | Boolean | true | 否 |
Slots
插槽名 | 说明 |
---|---|
default | 自定义日期格子的内容。作用域插槽参数:{day, today, choosedDay},每个属性都是一个日期对象,格式参考change事件的返回值 |
leftIcon | 自定义左箭头内容 |
rightIcon | 自定义右箭头内容 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 选中日期变化事件,函数参数回传当前当前选中的日期数据。 | Object;数据格式如下: { dateFormat: "YYYY/MM/DD", |
firstDayChange | 数据格式同change事件返回的数据格式 | Object; 当前显示的最左侧日期变化事件(常伴随着左右按钮点击事件发生,但其他情形比如屏幕resize事件等也可能会触发此事件),函数参数回传当前当前最左侧的日期数据。 |
swipeClick | 左右按钮点击事件。回调函数返回左右方向; | 'left':左侧按钮点击事件 'right':右侧按钮点击事件 |
swipeToEnd | 设置了最大/最小 日期时,点击左右按钮,滑动到最左边/右边时,会触发此事件。回调函数返回左右方向;当左右按钮滑动到尽头后,再次点击按钮,不会触发“swipeClick”点击事件 | 'left':左侧日期滑动到最小值事件 'right':右侧日期滑动到最大值事件 |
ClassName
‘date-item-weekend’ 周末日期样式的个性化配置:
基于可能出现的使用场景,对于周末日期提供个性化样式设置的通道;
你可以通过审查元素发现,周末的日期格子,会自带名为‘date-item-weekend’的class名;
你可以基于此class名称,在项目中使用任意的样式来覆盖组件原本的样式;包括但不限于日期背景色,文字颜色,边框,after/before伪元素样式……
‘date-highlighted’ 自定义日期:
配合props的highlightedDates属性使用,使用方式同上
示例代码
<vue-horizontal-calendar choosedDate="2019/12/01" v-on:change="dateChange2"></vue-horizontal-calendar>
data() {
return {
choosedDay2: {
dateFormat: "",
year: "",
month: "",
date: "",
day: "",
timestamp: ""
},
}
}
methods: {
dateChange2(day) {
this.choosedDay2 = day;
}
}