我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

基于Vue2-Calendar改进的日历组件(含中文使用说明)-创新互联

一,前言

10年积累的成都网站设计、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有巴林左旗免费网站建设让你可以放心的选择与我们合作。

我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅……

于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版

二,改进的功能

在Vue2-Calendar v2.2.4 版基础上作了优化。


1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'。


2.日历面板增加一个位置选项,允许让面板右对齐,只需要position=right即可。


3.原 :on-day-click 事件只有在 hasInput=false 时才生效,现改为一直有效,这样当用户点击日历面板上的日期后就可以触发该事件。


4.clear=false时文本框右侧会显示一个日历图标,高仿bootstrap的日历组件,但clear=true时不显示

效果图

基于Vue2-Calendar改进的日历组件(含中文使用说明)基于Vue2-Calendar改进的日历组件(含中文使用说明)

三,使用示例

1.常规使用,单日历

HTML代码:


2       


标题名称:基于Vue2-Calendar改进的日历组件(含中文使用说明)-创新互联
浏览路径:http://mswzjz.cn/article/esoed.html

其他资讯