资讯专栏INFORMATION COLUMN

手把手编写一个Vue日历表组件

brianway / 942人阅读

摘要:项目需要,需要一个日历表组件,产品狗嫌弃第三方提供的组件样式太丑,功能不全,带刀和产品理论奈何产品有枪。无奈只能自己写一个,发布完这条博客我就提离职,再也不和产品多。

项目需要,需要一个日历表组件,产品狗嫌弃第三方提供的组件样式太丑,功能不全,带刀和产品理论奈何产品有枪。无奈只能自己写一个,发布完这条博客我就提离职,再也不和产品多BB。
Html=>
``
js=>

css=>
tips:我用的css解析器是stylus,用less和sass之类的大佬麻烦动动你们的小手加个花括号

给各位大佬呈上APP.vue中的调用,以及参数详细用法
App.vue中的@test1事件是在在入参markArr中定义的,其中在markArr中color是标记日期的样式颜色,name是显示的样式名称,days是日期数组,clickEvent就是自定义事件名称






丢个成果图

是不是很丑?我故意的,想要好看自己改去吧,大致功能全都实现了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104191.html

相关文章

  • 把手教会使用react开发日历组件

    摘要:你也可以从其他星期开始,不过会对下面的日期显示有影响,因为每个月的第一天是周几决定第一天显示在第几个格子里。首先要根据年月的第一天获得,根据这个获取周几。 准备工作 提前需要准备好react脚手架开发环境,由于react已经不支持在页面内部通过jsx.transform来转义,我们就自己大了个简易的开发环境 创建一个文件夹,命名为react-canlendar cd ./react-c...

    remcarpediem 评论0 收藏0
  • 把手教会使用react开发日历组件

    摘要:你也可以从其他星期开始,不过会对下面的日期显示有影响,因为每个月的第一天是周几决定第一天显示在第几个格子里。首先要根据年月的第一天获得,根据这个获取周几。 准备工作 提前需要准备好react脚手架开发环境,由于react已经不支持在页面内部通过jsx.transform来转义,我们就自己大了个简易的开发环境 创建一个文件夹,命名为react-canlendar cd ./react-c...

    lingdududu 评论0 收藏0
  • 把手教你写 Vue UI 组件库@vue2.0

    摘要:手把手教你写组件库最近在研究的实现,发现网上很少有关于插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好。 手把手教你写 Vue UI 组件库 最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好。 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox 组件为例子,带大家入门 v...

    Keagan 评论0 收藏0

发表评论

0条评论

brianway

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<