vue 日历插件ele-calendar

由于项目中需要一个日历功能我比较懒不想自己写所以就找了一插件,不过样式不符合要求自己又改了一下。

原版样式

修改后样式

全局引入

npm install ele-calendar

组件中使用

//html部分
<template>
    <div>
        <div style="width: 335px;height: 600px;margin: 30px auto">
            <ele-calendar
                    :render-content="renderContent"
                    :data="datedef"
                    :prop="prop"
                    @pick="datePick"
                    @date-change="getMonth"
            ></ele-calendar>
        </div>
    </div>
</template>
// script 部分
<script>
    // 引入
    import eleCalendar from 'ele-calendar'
    import 'ele-calendar/dist/vue-calendar.css'
    export default {
        name: "ElementTest",
        data() {
            return {
                datedef: [
                    {"date": "2020-03-30", "content": null, "cid": null},
                    {"date": "2020-03-26", "content": null, "cid": null},
                ],
                prop: 'date' //对应日期字段名
            }
        },
        components: {
            eleCalendar
        },
        methods: {
       		// 通过render-content的渲染Function 自定义日历显示内容
            renderContent(h, parmas) {
            	// 自定义样式,我返回的是小点(橘黄色)
                const loop = (data) => {
                    return data.defvalue.value ? h('div',
                        [
                            h('div', data.defvalue.text), h('div',{
                            style: {
                                width: '4px',
                                height:'4px',
                                margin: '0 auto',
                                borderRadius: '4px',
                                backgroundColor:'red',
                            }
                        }, '')]) : h('div', [h('div', data.defvalue.text)
                        ]
                    )
                }
                return h('div', {
                    // 给div绑定样式
                    style: {
                        minHeight: '45px'
                    },
                    click() {
                    }
                }, [loop(parmas)])
            },
            // 获取点击的日期 返回为标准格式 使用date.get方法获取想要的数据
            datePick(date, event, row, dome) {     
            	console.log(date); // Tue Mar 03 2020 00:00:00 GMT+0800 (中国标准时间)        
                var d = new Date(date);
                console.log(d.getDate()); //  点击日
                console.log(d.getMonth() + 1);    // 点击月    
            },
            // 点击切换月/年按钮时返回的数据 格式为标准格式
            getMonth(data){
            	console.log(data); // Fri Apr 03 2020 00:00:00 GMT+0800 (中国标准时间)
                var d = new Date(data); // 点击月
                console.log(d.getMonth() + 1)
                //d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + 	
                //d.getSeconds()		// 标准时间转化       方法
            }
        }
    }
</script>

修改部分

.el-date-table-calendar td.current[data-v-55be3324]:not(.disabled) 格内样式
 color: #fff;
      background-color: #5cadff;
      border-radius: 50%;
.el-date-picker-calendar table    table 样式
 	padding: 10px;
    box-sizing: border-box;
    table-layout: fixed;
    width: 100%;
@date-change="getMonth" 年份月份点击绑定事件

原文地址: https://segmentfault.com/a/1190000015382208?utm_source=tag-newest
项目地址:https://github.com/xuyanming/ele-calendar

总结

感谢插件作者,让我这种懒人轻松了好多!分享一下,能帮到大家就很好了。