当前位置: 首页 > 文档资料 > VUX 中文文档 >

Calendar 组件使用教程

优质
小牛编辑
147浏览
2023-12-01

安装

import { Calendar } from 'vux'

export default {
  components: {
    Calendar
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Calendar } from 'vux'

Vue.component('calendar', Calendar)
  <group>
    <calendar title="title" v-model="value"></calendar>
  </group>

calendar只能在Group中使用

除了titlevalue, 其他propsinline-calendar完全一致。

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

属性

名字类型默认值说明版本要求
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--弹窗关闭时触发--

样式变量

名字默认值说明继承自变量
@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-size16px单元格的字号
@calendar-bg-color#fff背景颜色
@calendar-each-date-item-size26px日期单元格尺寸大小
@calendar-each-date-item-line-height25px日期单元格的行高
@calendar-header-day-item-color#000头部的文本颜色