一个vue calendar的npm组件
说明:
1.基于element-ui开发的vue日历组件。 地址
使用方法:
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'
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) {
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 | — | — |
highlight | 是否要高亮对应日期 | boolean | — | false |
currentmonth | 高亮选中日期 | boolean | — | false |
disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
border | 是否带有边框 | boolean | — | false |
render-content | 内容区的渲染 Function | Function(h, parmas) | — | — |
Calendar Events
事件名 | 说明 | 参数 |
---|---|---|
pick | 切换日历年、月 | data |
date-change | 点击日历 | 返回当前点击时间data、event、row、dome |