Calendar

Calendar

demo 原始链接demo 源码编辑文档组件源码

calendar - 图1

二维码

calendar - 图2

Install

安装

局部注册

全局注册

  1. import { Calendar } from 'vux'
  2. export default {
  3. components: {
  4. Calendar
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Calendar } from 'vux'
  4. Vue.component('calendar', Calendar)
  1. <group>
  2. <calendar title="title" v-model="value"></calendar>
  3. </group>

calendar只能在Group中使用除了titlevalue, 其他propsinline-calendar完全一致。

当绑定值为数组时,日历将为多选模式

API

属性

名字类型默认值说明版本要求
valuestring表单值, v-model 绑定。当值为空时,为单选;当值为[]时,为多选;设置值为'TODAY'可快捷选取当前日期。placeholder只有在值为空或[]时显示。
titlestringlabel文字
placeholderstring占位提示文字
show-popup-headerboolean是否显示弹窗头部,当为多选时强制显示,单选时默认不显示v2.6.0
popup-header-titlestring弹窗头部文字v2.6.0
display-formatfunction格式化显示值v2.6.4
readonlystring是否禁用弹窗选择v2.7.2

事件

名字参数说明版本要求
@on-change(value)值改变时触发
@on-show弹窗显示时触发
@on-hide弹窗关闭时触发

Variables

## 样式变量


名字默认值说明继承自变量
@calendar-arrow-color #04BE02 前进后退的箭头颜色@theme-color
@calendar-highlight-color #E59313 周末高亮的文本颜色
@calendar-selected-bg-color #04BE02 选中时的背景颜色@theme-color
@calendar-disabled-font-color #c0c0c0 禁用时的文本颜色
@calendar-today-font-color #04BE02 今天的文本颜色@theme-color
@calendar-date-item-font-size 16px 单元格的字号
@calendar-bg-color #fff 背景颜色
@calendar-each-date-item-size 26px 日期单元格尺寸大小
@calendar-each-date-item-line-height 25px 日期单元格的行高
@calendar-header-day-item-color #000 头部的文本颜色

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 30,贡献人数 4
airylandQiongrong JiangLin Senlichunqiang

Changelog

发布日志

  • 2.7.6 [fix] 修复选中同个日期时无法自动关闭的问题 #2306
  • v2.7.2 [feature] 支持禁用选择属性 prop:readonly #2178
  • v2.7.2 [fix] 修复 on-change 事件重复触发的问题
  • v2.7.0 [fix] 修复上边框 #2104
  • v2.6.4 [feature] 支持格式化值显示 #2023
  • v2.6.0 [feature] 支持显示弹窗头部(取消,确定)
  • v2.5.10 [feature] 支持 prop:placeholder