一个vue的日历组件
说明:
1.基于element-ui开发的vue日历组件。
更新:
1.增加value-format指定返回值的格式
2.增加头部插槽自定义头部
<ele-calendar >
<template slot-scope="slotProps">
{{ slotProps.todo}}
</template>
</ele-calendar >
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
使用方法:
1.下载npm包:
你的VUE项目的根目录底下运行:
npm install ele-calendar
2.引入本npm包并注册为vue的组件:
例如:在需要使用的vue页面中:
<template>
<!-- 里面写eleCalendar组件-->
<ele-calendar
:render-content="renderContent"
:data="datedef"
:prop="prop"
></ele-calendar>
</template>
<script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
export default {
data(){
return{
datedef:[
{"date":"2018-06-30","content":null,"cid":null},
{"date":"2018-06-26","content":null,"cid":null},
],
prop:'date' //对应日期字段名
}
},
components: {
eleCalendar
},
methods: {
renderContent(h,parmas) {
const loop = data =>{
return (
data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
<span >备选项</span>
</div>) : <div>{data.defvalue.text}</div>
)
}
return (
<div style="min-height:60px;">
{loop(parmas)}
</div>
);
},
}
}
</script>
3.通过render-content的渲染Function 自定义日历显示内容
例如:
renderContent(h,parmas) { //设置lunarcalendar=true,parmas返回值包含农历
const loop = data =>{
return (
data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
<span >备选项</span>
</div>) : <div>{data.defvalue.text}</div>
)
}
return (
<div style="min-height:60px;">
{loop(parmas)}
</div>
);
},
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]} |
一个vue的日历组件的更多相关文章
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- Vue自定义日历组件
今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart ...
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- VUE -- 如何快速的写出一个Vue的icon组件?
伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...
- vue初学实践之路——vue简单日历组件(2)
上一篇我们已经实现了基本的日历显示功能,这一次我们要加上预定的功能 废话不多说,上代码 <div id="calendar"> <!-- 年份 月份 --> ...
- vue自定义日历组件的实现
实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalend ...
随机推荐
- 单源最短路 Bellman-Ford算法(有向图)
// 单源最短路问题 // Bellman-Ford算法 // 复杂度O(V*E) //! 可以判断负圈 #include <cstdio> #include <iostream&g ...
- SpringCloud踩坑
今天在使用 SpringCloud 时遇到了一个问题,感觉有不少小伙伴会遇到,所以记录下来 版本说明 SpringBoot 2.2.4.RELEASE SpringCloud Greenwich.SR ...
- centos 7.6 docker 安装 nextcloud -使用sqlite数据库
docker search nextcloud docker pull docker.io/nextcloud docker images mkdir /home/nextcloud chmod -R ...
- spring mvc5 的 配置文件 pom.xml
spring mvc5 的 配置文件 pom.xml <?xml version="1.0" encoding="UTF-8"?> <pro ...
- Dijkstra算法(Matlab实现)
a = [,,,,,,]; % 起点节点 b = [,,,,,,]; % 终点节点 c = [,,,,,,]; % 对应权值 g = digraph(a,b,c); % 创建图 [path,dista ...
- .Net Core程序最终只产生1个exe
1.用VS新建一个.Net Core 命令行程序,程序里面写什么都行,我的是这样的 2.打开程序包控制台,或者使用PowerShell等可以执行dotnet命令的工具,把你的.Net 程序发布(编译) ...
- C#通过文件路径获取文件名
string fullPath = @"\WebSite1\Default.aspx"; string filename = System.IO.Path.GetFileName( ...
- redis缓存优化
redis缓存优化 一.问题 在Javaweb项目中,如果每次刷新,所有资源都重新从数据库中读取,这样每次效率会很低,在这里可以使用redis非关系型数据库,将一些不经常变化得资源加载进内存中.提高效 ...
- hdu 1011 Starship Troopers(树上背包)
Problem Description You, the leader of Starship Troopers, are sent to destroy a base of the bugs. Th ...
- 打印机打印pdf文件特别慢怎么解决
PDF等文件中都包含了一些或者很多光栅化数据(图片.嵌入的字体等).这些文件在打印时,打印机驱动程序都会在系统中生成大量EMF文件(增强型变换文件),小到1MB,大到500MB,过大的EMF临时文件会 ...