一个vue的日历组件

liuhh 发布于2019-08-22 18:16 / 2972人阅读

一个vue calendar的npm组件 说明：

1.基于element-ui开发的vue日历组件。

地址

更新:

1.增加value-format指定返回值的格式
2.增加头部插槽自定义头部


 

todo="{"yearLabel":"年","month":"月","event":[prevYear,prevMonth,nextYear,nextMonth]}"
event为切换年月是调用事件

3.增加日期多选 :selectionMode=""dates""，事件select返回选择日期及节点
4.增加语言切换 :lang=""en""
5.抽离css方便自定义样式 import "ele-calendar/dist/vue-calendar.css" //引入css

注释：需要配置了jsx依赖

使用方法：

1.下载npm包:

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

    npm install ele-calendar

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

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

3.通过render-content的渲染Function 自定义日历显示内容

例如：

    renderContent(h,parmas) { //设置lunarcalendar=true,parmas返回值包含农历
                const loop = data =>{
                  return (
                    data.defvalue.value ? ({data.defvalue.text} 
                    备选项
                    
) : {data.defvalue.text}
                  )
               }
               return (
                
                 {loop(parmas)}
                
                );
             },
       parmas返回当前日期和传入data对应内容

Calendar Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
prop	对应日期字段名	string	—	—
lang	语言切换	string	en	zh-CN
value-format	绑定值的格式。不指定则绑定值为 Date 对象	string	yyyy-MM-dd	—
selectionMode	日历模式	string	dates	day
highlight	是否要高亮对应日期	boolean	—	false
currentmonth	高亮选中日期	boolean	—	false
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
border	是否带有边框	boolean	—	false
lunarcalendar	是否需要农历	boolean	—	false
defaultValue	默认展示某月	Date	—	—
render-content	内容区的渲染 Function	Function(h, parmas)	—	—

Calendar Events

事件名	说明	参数
date-change	切换日历年、月	data
select	选择日期的数组及节点	val,selectDom
pick	点击日历	返回当前点击时间data、event、row、dome

Scoped Slot

name	说明
—	自定义头的内容，参数为 {"yearLabel":"年","month":"月","event":[prevYear,prevMonth,nextYear,nextMonth]}

云服务器 idc机房托管日历组件 vue.js日历控件 vue组件 vue组件开发

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

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

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

摘要：改进原控件无法切换语言的，支持和。日历面板增加一个位置选项，允许让面板右对齐，只需要即可。原事件只有在时才生效，现改为一直有效，这样当用户点击日历面板上的日期后就可以触发该事件。一，前言我是刚学Vue的菜鸟，在使用过程中需要用到日历控件，由于项目中原来是用jQuery写的，因此用了bootstarp的日历控件，但是配合Vue实在有点蛋疼，不够优雅…… 于是网上搜...

番茄西红柿 2019-04-23 11:41 评论0 收藏0
vue-calendar 基于 vue 2.0 开发的轻量，高性能日历组件

摘要：基于开发的轻量，高性能日历组件占用内存小，性能好，样式好看，可扩展性强原生开发，没引入第三方库上很多点击弹出日历选择某个时间的组件，却没有找到单纯展示日历并且能点击获取时间的组件少部分日历组件的占用内存过于大，对于日历这样简单的功能来说 vue-calendar-component 基于 vue 2.0 开发的轻量，高性能日历组件占用内存小，性能好，样式好看，可扩展性强原生 js...

vvpale 2019-08-22 11:16 评论0 收藏0
vue-calendar 基于 vue 2.0 开发的轻量，高性能日历组件

摘要：基于开发的轻量，高性能日历组件占用内存小，性能好，样式好看，可扩展性强原生开发，没引入第三方库上很多点击弹出日历选择某个时间的组件，却没有找到单纯展示日历并且能点击获取时间的组件少部分日历组件的占用内存过于大，对于日历这样简单的功能来说 vue-calendar-component 基于 vue 2.0 开发的轻量，高性能日历组件占用内存小，性能好，样式好看，可扩展性强原生 js...

megatron 2019-08-29 14:00 评论0 收藏0
vue2.0项目－calendar.js(日历组件封装)

摘要：今天要说的是在做这个项目的过程中，自己想加一个日历功能，但是找遍很多插件，没有多少是合我心意，于是就想说自己写一个，但是想象太美好，技术能力不够，写不出，此处省略一万字。最近一直闲来无事，便寻思着做一下自己的个人项目，也想说能使用现在比较流行的一些mvvm框架来做，于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做，做得也是多页面应用，使用v...

cod7ce 2019-08-21 15:29 评论0 收藏0