vue的日历组件

浅浅的花香味﹌ 2022-05-21 00:39 301阅读 0赞

# 一个vue calendar的npm组件 #

### 说明： ###

1.基于element-ui开发的vue日历组件。  
![图片描述][bVbcHKw_w_612_h_491]

[地址][Link 1]

### 使用方法： ###

##### 1.下载npm包: #####

##### 你的VUE项目的根目录底下运行： #####

npm install ele-calendar

##### 2.引入本npm包并注册为vue的组件： #####

> 例如：在需要使用的vue页面中：

<template>
            
            
                <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 ###

<table style="border-spacing:0px;background-color:rgb(255,255,255);width:825px;color:rgb(51,51,51);font-family:BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei';font-size:15px;"> 
 <thead> 
  <tr> 
   <th style="border-color:rgb(230,230,230);background:rgb(243,243,243);">参数</th> 
   <th style="border-color:rgb(230,230,230);background:rgb(243,243,243);">说明</th> 
   <th style="border-color:rgb(230,230,230);background:rgb(243,243,243);">类型</th> 
   <th style="border-color:rgb(230,230,230);background:rgb(243,243,243);">可选值</th> 
   <th style="border-color:rgb(230,230,230);background:rgb(243,243,243);">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">data</td> 
   <td style="border-color:rgb(230,230,230);">显示的数据</td> 
   <td style="border-color:rgb(230,230,230);">array</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">prop</td> 
   <td style="border-color:rgb(230,230,230);">对应日期字段名</td> 
   <td style="border-color:rgb(230,230,230);">string</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">highlight</td> 
   <td style="border-color:rgb(230,230,230);">是否要高亮对应日期</td> 
   <td style="border-color:rgb(230,230,230);">boolean</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">currentmonth</td> 
   <td style="border-color:rgb(230,230,230);">高亮选中日期</td> 
   <td style="border-color:rgb(230,230,230);">boolean</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">disabledDate</td> 
   <td style="border-color:rgb(230,230,230);">设置禁用状态，参数为当前日期，要求返回 Boolean</td> 
   <td style="border-color:rgb(230,230,230);">Function</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">border</td> 
   <td style="border-color:rgb(230,230,230);">是否带有边框</td> 
   <td style="border-color:rgb(230,230,230);">boolean</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:rgb(230,230,230);">render-content</td> 
   <td style="border-color:rgb(230,230,230);">内容区的渲染 Function</td> 
   <td style="border-color:rgb(230,230,230);">Function(h, parmas)</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
   <td style="border-color:rgb(230,230,230);">—</td> 
  </tr> 
 </tbody> 
</table>

### Calendar Events ###

[bVbcHKw_w_612_h_491]: /images/20220521/9bc0c217b829440f903fbdf5e11a3c00.png
[Link 1]: https://github.com/xuyanming/ele-calendar