Vue-calendar-h5-tf NPM

前言

jinzhe 大佬的 vue-calendar

食用方式

安装

npm install vue-calendar-h5-tf

# or

cnpm install vue-calendar-h5-tf

普通使用

<template>
  <div id="app">
    <h5-calendar></h5-calendar>
  </div>
</template>

<script>
// 局部引入
import H5Calendar  from 'vue-calendar-h5-tf'
export default {
  name: 'App',
  components: { H5Calendar }
};

// 全局引入
import H5Calendar from 'vue-calendar-h5-tf'
Vue.use(H5Calendar)
</script>

Dome

<template>
  <div>
    <div class="calendardome">
      <h5>原作者版本(加了滑动切换)</h5>
      <H5Calendar lunar :touchthreshold="50"/>
    </div>
    <div class="calendardome">
      <h5>纯展示版本</h5>
      <H5Calendar
        lunar
        :touchthreshold="50"
        :controllable="false"
        versions="juli"
        isshowtoday
      />
    </div>
  </div>
</template>

<script>
import H5Calendar from "vue-calendar-h5-tf";
export default {
  components: { H5Calendar }
};
</script>

<style scoped>
.calendardome {
  padding: 0 22px;
}
</style>

<template>
  <div class="calendardome">
    <H5Calendar>
      <template #header="{ date, data }">
        {{ date }}
        {{ data }}
			</template>
			<template #footer="{ date, data }">
        {{ date }}
        {{ data }}
			</template>
  	</H5Calendar>
    </div>
</template>

<script>
import H5Calendar from "vue-calendar-h5-tf";
export default {
  components: { H5Calendar }
};
</script>

<style scoped>
.calendardome {
  padding: 0 22px;
}
</style>

演示网站

可以到http://www.yi-school.top查看效果演示

默认配置

关于配置信息，请查看源文档，感谢原作者 jinzhe 大佬的vue-calendar
这里这是做了简单的汇总 | 名称 | 功能 | 默认值 | | :--- | :--- | :--- | | value | 日历默认值 | [] | | begin | 限制开始选择日期 | [] | | end | 限制结束选择日期 | [] | | range | 你可以选择一个时间段 | false | | zero | 日期 0 | false | | lunar | 显示中国农历 | false | | weeks | 根据系统语言变化或自定义星期显示 | 根据系统选择显示(星期一 or Mon)等 | | months | 根据系统语言变化或自定义月份显示 | 根据系统选择显示(一月 or January)等 | | events | 自定义日历事件 | {} | | multi | 多选模式 | false | | zero | 是否小于 10 补零 | false | | disabled | 需要屏蔽的日期 | [] | | 以上原作者配置,以下新增配置 | | controllable | 是否可以点击(纯展示建议为 false) | true | | versions | 显示版本(为空则原作者版本,'juli'则纯展示版本) | '' | | isshowtoday | 是否在日期上标注今天 | false | | touchthreshold | 滑动切换的阈值(number 类型 0 为不开启) | 0 | | collapse | 开启折叠功能 | false | | 增加支持slot功能 | | slot 名称 | 位置 | v-slot 携带数据 | | header | 头部 | { date, data } | | footer | 尾部 | { date, data } | | collapse | 折叠 | { collapse } |