手写一个Vue日历组件

.calendertext-aligncentermin-width280pxheight400px.calender-title-wrapperheight44pxline-height44px.calender-titledisplayflexmargin0自动宽度280px.calender-arrow-itemflex0040pxcursorpointer&.left1backgroundurl("icon_left.svg")no-repeatcenter&.left2backgroundurl("icon_left2.svg")no-repeatcenter&.right1背景url("icon_right.svg")无重复中心&.right2背景url("icon_right2.svg")无重复中心.calender-Date-textflex1color#424242font-size16px.calender-content-wrapper.calender-days-wrapper显示flexheight44pxline-height44pxmargin-bottom11px.calender-daysflex1color#A7A7A7font-size14px.calender-content.calender-item-wrapperpositionrelativefloatleftwidth14.285%高度44px行高44px颜色#686868光标指针.tem-wrapperpositionabsoluteleft50%height10pxwidth40pxtransformtranslate3d(-50%,35px,0)font-size0.temppositionrelativedisplayinline-blockline-height10pxwidth6pxheight6pxbackground#4fff41border-radius3pxtop-16pxmargin02px.calender-itempositionabsoluteleftcalc(50%-20px)topcalc(50%-20px)height40pxwidth40pxborder-radius20pxline-height40px&:hoverbackground#FFC912&.no-current-daycolor#DCDCDC&.currentDaycolor#ffffff.calender-itembackground#FFC912&.active颜色#ffffff.calender-itembackground#FFC912.calender-mask-wrapperheight37px.calender-mask-itemheight37pxline-height37pxwidth25%floatleft.temmargin-right3pxdisplayinline-block高度8pxwidth8pxborder-radius4px.textfont-size12px该项目需要一个日历组件。产品狗不喜欢第三方提供的组件，样式丑陋，功能不全。它有刀和产品理论，但产品有枪。没办法，只好自己写一篇。发完这篇博文，我就辞职了，以后再也不跟产品多BB了。Html=>``js=>css=>tips:我用的css解析器是stylus，用less和sass等大佬请动动小手加花括号.calendertext-aligncentermin-width280pxheight400px.calender-title-wrapperheight44pxline-height44px.calender-titledisplayflexmargin0自动宽度280px.calender-arrow-itemflex0040pxcursorpointer&.left1backgroundurl("icon_left.svg")no-repeatcenter&.left2backgroundurl("icon_left2.svg")no-repeatcenter&.right1背景url("icon_right.svg")无重复中心&.right2背景url("icon_right2.svg")无重复中心.calender-Date-textflex1color#424242font-size16px.calender-content-wrapper.calender-days-wrapper显示flexheight44pxline-height44pxmargin-bottom11px.calender-daysflex1color#A7A7A7font-size14px.calender-content.calender-item-wrapperpositionrelativefloatleftwidth14.285%高度44px行高44px颜色#686868光标指针.tem-wrapperpositionabsoluteleft50%height10pxwidth40pxtransformtranslate3d(-50%,35px,0)font-size0.temppositionrelativedisplayinline-blockline-height10pxwidth6pxheight6pxbackground#4fff41border-radius3pxtop-16pxmargin02px.calender-itempositionabsoluteleftcalc(50%-20px)topcalc(50%-20px)height40pxwidth40pxborder-radius20pxline-height40px&:hoverbackground#FFC912&.no-current-daycolor#DCDCDC&.currentDaycolor#ffffff.calender-itembackground#FFC912&.active颜色#ffffff.calender-itembackground#FFC912.calender-mask-wrapperheight37px.calender-mask-itemheight37pxline-height37pxwidth25%floatleft.temmargin-right3pxdisplayinline-block高度8pxwidth8pxborder-radius4px.textfont-size12px把APP.vue中的调用和参数的详细用法呈现给大家。App.vue中的@test1事件定义在入参markArr中，其中markArr其中color为标记日期的样式颜色，name为显示的样式名称，days为日期数组，clickEvent为自定义事件名称#apppositionabsoluteheight100%width100%丢一张结果图是不是很丑？我是故意的，如果你想好看一点，自己改，大致所有功能都实现了