Vue.js横向日历组件别人的

安装

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", year: "YYYY", month: "MM", date: "DD", timestamp: 1575129600000, day: "日" }
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;
    }
}