vue-calendar基于vue的日历插件 - 好文

本文转载于
https://www.cnblogs.com/zwhgithub/p/8005414.html
<https://www.cnblogs.com/zwhgithub/p/8005414.html>

vue-calendar-component

* 基于 vue 2.0 开发的轻量，高性能日历组件
* 占用内存小，性能好，样式好看，可扩展性强
* 原生 js 开发，没引入第三方库
demo

* https://zwhgithub.github.io/vue-calendar/dist/#/
<https://zwhgithub.github.io/vue-calendar/dist/#/>
效果

Install
npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像
Usage
//vue文件中引入 import Calendar from 'vue-calendar-component'; components: {
Calendar } <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate" //
v-on:isToday="clickToday" // :markDate=arr // arr=['2018/4/1','2018/4/3']
标记4月1日和4月3日简单标记 //:markDateMore=arr // 多种不同的标记 //第一个标记和第二个标记不能同时使用 //
:agoDayHide='1514937600' //某个日期以前的不允许点击时间戳10位 // :futureDayHide='1525104000'
//某个日期以后的不允许点击时间戳10位 // :sundayStart="true" //默认是周一开始当是true的时候是周日开始
></Calendar> clickDay(data) { console.log(data); //选中某天 }, changeDate(data) {
console.log(data); //左右点击切换月份 }, clickToday(data) { console.log(data); //跳到了本月
} // 多个标记示例 arr=[{date:'2018/4/1',className:"mark1"},
{date:'2018/4/13',className:"mark2"}]; //4月1 标记的className是mark1 根据class做出一些标记样式
API

遇到错误—

* 遇到提示UglifyJs打包编译错误。因为当前版本UglifyJs不知道编译es6
解决方法
npm install --save-dev babel-preset-env //然后在根目录创建一个 .babelrc 文件 //在输入, {
"presets": ["env"] } //保存重新build就OK了

热门工具换一换