一个vue calendar的npm组件
说明:
1.基于element-ui开发的vue日历组件。
![](https://i-blog.csdnimg.cn/blog_migrate/2c6e0170f24d2ca218526f93c25432ce.gif)
地址
更新:
1.增加value-format指定返回值的格式
2.增加头部插槽自定义头部
<ele-calendar >
<template slot-scope="slotProps">
{{ slotProps.todo}}
</template>
</ele-calendar >
todo="{'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]}"
event为切换年月是调用事件
3.增加日期多选 :selectionMode="'dates'",事件select返回选择日期及节点
4.增加语言切换 :lang="'en'"
5.抽离css方便自定义样式 import 'ele-calendar/dist/vue-calendar.css' //引入css
注释:需要配置了jsx依赖
使用方法:
1.下载npm包:
你的VUE项目的根目录底下运行:
npm install ele-calendar
2.引入本npm包并注册为vue的组件:
例如:在需要使用的vue页面中:
<template>
<!-- 里面写eleCalendar组件-->
<ele-calendar
:render-content="renderContent"
:data="datedef"
:prop="prop"
></ele-calendar>
</template>
<script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
export default {
data(){
return{
datedef:[
{"date":"2018-06-30","content":null,"cid":null},
{"date":"2018-06-26","content":null,"cid":null},
],
prop:'date' //对应日期字段名
}
},
components: {
eleCalendar
},
methods: {
renderContent(h,parmas) {
const loop = data =>{
return (
data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
<span >备选项</span>
</div>) : <div>{data.defvalue.text}</div>
)
}
return (
<div style="min-height:60px;">
{loop(parmas)}
</div>
);
},
}
}
</script>
3.通过render-content的渲染Function 自定义日历显示内容
例如:
renderContent(h,parmas) { //设置lunarcalendar=true,parmas返回值包含农历
const loop = data =>{
return (
data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
<span >备选项</span>
</div>) : <div>{data.defvalue.text}</div>
)
}
return (
<div style="min-height:60px;">
{loop(parmas)}
</div>
);
},
parmas返回当前日期和传入data对应内容
Calendar Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
data | 显示的数据 | array | — | — |
prop | 对应日期字段名 | string | — | — |
lang | 语言切换 | string | en | zh-CN |
value-format | 绑定值的格式。不指定则绑定值为 Date 对象 | string | yyyy-MM-dd | — |
selectionMode | 日历模式 | string | dates | day |
highlight | 是否要高亮对应日期 | boolean | — | false |
currentmonth | 高亮选中日期 | boolean | — | false |
disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
border | 是否带有边框 | boolean | — | false |
lunarcalendar | 是否需要农历 | boolean | — | false |
defaultValue | 默认展示某月 | Date | — | — |
render-content | 内容区的渲染 Function | Function(h, parmas) | — | — |
Calendar Events
事件名 | 说明 | 参数 |
---|
date-change | 切换日历年、月 | data |
select | 选择日期的数组及节点 | val,selectDom |
pick | 点击日历 | 返回当前点击时间data、event、row、dome |
Scoped Slot
name | 说明 |
---|
— | 自定义头的内容,参数为 {'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]} |