|
- import { defineMixin } from '../../libs/vue'
- import CalendarDefaultProps from './calendar'
- import { registerComponentProps } from '../../libs/config/props.js'
-
- const defProps = registerComponentProps(CalendarDefaultProps)
- export const props = defineMixin({
- props: {
- // 日历顶部标题
- title: {
- type: String,
- default: () => defProps.calendar.title
- },
- // 是否显示标题
- showTitle: {
- type: Boolean,
- default: () => defProps.calendar.showTitle
- },
- // 是否显示副标题
- showSubtitle: {
- type: Boolean,
- default: () => defProps.calendar.showSubtitle
- },
- // 日期类型选择,single-选择单个日期,multiple-可以选择多个日期,range-选择日期范围
- mode: {
- type: String,
- default: () => defProps.calendar.mode
- },
- // mode=range时,第一个日期底部的提示文字
- startText: {
- type: String,
- default: () => defProps.calendar.startText
- },
- // mode=range时,最后一个日期底部的提示文字
- endText: {
- type: String,
- default: () => defProps.calendar.endText
- },
- // 自定义列表
- customList: {
- type: Array,
- default: () => defProps.calendar.customList
- },
- // 主题色,对底部按钮和选中日期有效
- color: {
- type: String,
- default: () => defProps.calendar.color
- },
- // 最小的可选日期
- minDate: {
- type: [String, Number],
- default: () => defProps.calendar.minDate
- },
- // 最大可选日期
- maxDate: {
- type: [String, Number],
- default: () => defProps.calendar.maxDate
- },
- // 默认选中的日期,mode为multiple或range是必须为数组格式
- defaultDate: {
- type: [Array, String, Date, null],
- default: () => defProps.calendar.defaultDate
- },
- // mode=multiple时,最多可选多少个日期
- maxCount: {
- type: [String, Number],
- default: () => defProps.calendar.maxCount
- },
- // 日期行高
- rowHeight: {
- type: [String, Number],
- default: () => defProps.calendar.rowHeight
- },
- // 日期格式化函数
- formatter: {
- type: [Function, null],
- default: () => defProps.calendar.formatter
- },
- // 是否显示农历
- showLunar: {
- type: Boolean,
- default: () => defProps.calendar.showLunar
- },
- // 是否显示月份背景色
- showMark: {
- type: Boolean,
- default: () => defProps.calendar.showMark
- },
- // 确定按钮的文字
- confirmText: {
- type: String,
- default: () => defProps.calendar.confirmText
- },
- // 确认按钮处于禁用状态时的文字
- confirmDisabledText: {
- type: String,
- default: () => defProps.calendar.confirmDisabledText
- },
- // 是否显示日历弹窗
- show: {
- type: Boolean,
- default: () => defProps.calendar.show
- },
- // 是否显示遮罩
- overlay: {
- type: Boolean,
- default: () => defProps.calendar.overlay
- },
- // 动画时长,单位ms
- duration: {
- type: [String, Number],
- default: () => defProps.calendar.duration
- },
- // 自定义遮罩的样式
- overlayStyle: {
- type: [Object, String],
- default: () => defProps.calendar.overlayStyle
- },
- // 遮罩的透明度,0-1之间
- overlayOpacity: {
- type: [Number, String],
- default: () => defProps.calendar.overlayOpacity
- },
- // 层级
- zIndex: {
- type: [String, Number],
- default: () => defProps.calendar.zIndex
- },
- // 是否为iPhoneX留出底部安全距离
- safeAreaInsetBottom: {
- type: Boolean,
- default: () => defProps.calendar.safeAreaInsetBottom
- },
- // 是否留出顶部安全距离(状态栏高度)
- safeAreaInsetTop: {
- type: Boolean,
- default: () => defProps.calendar.safeAreaInsetTop
- },
- // 弹窗背景色,设置为transparent可去除白色背景
- bgColor: {
- type: String,
- default: () => defProps.calendar.bgColor
- },
- // 是否允许点击遮罩关闭日历
- closeOnClickOverlay: {
- type: Boolean,
- default: () => defProps.calendar.closeOnClickOverlay
- },
- // 是否为只读状态,只读状态下禁止选择日期
- readonly: {
- type: Boolean,
- default: () => defProps.calendar.readonly
- },
- // 是否展示确认按钮
- showConfirm: {
- type: Boolean,
- default: () => defProps.calendar.showConfirm
- },
- // 日期区间最多可选天数,默认无限制,mode = range时有效
- maxRange: {
- type: [Number, String],
- default: () => defProps.calendar.maxRange
- },
- // 范围选择超过最多可选天数时的提示文案,mode = range时有效
- rangePrompt: {
- type: String,
- default: () => defProps.calendar.rangePrompt
- },
- // 范围选择超过最多可选天数时,是否展示提示文案,mode = range时有效
- showRangePrompt: {
- type: Boolean,
- default: () => defProps.calendar.showRangePrompt
- },
- // 是否允许日期范围的起止时间为同一天,mode = range时有效
- allowSameDay: {
- type: Boolean,
- default: () => defProps.calendar.allowSameDay
- },
- // 区间模式下确认返回值格式,all-返回区间内所有日期,boundary-仅返回起止日期
- rangeResultMode: {
- type: String,
- default: () => defProps.calendar.rangeResultMode
- },
- // 是否开启时分秒选择
- enableTime: {
- type: Boolean,
- default: () => defProps.calendar.enableTime
- },
- // 时间精度:hour-仅时,minute-时分,second-时分秒
- timePrecision: {
- type: String,
- default: () => defProps.calendar.timePrecision
- },
- // 默认时间,格式支持 HH / HH:mm / HH:mm:ss
- defaultTime: {
- type: String,
- default: () => defProps.calendar.defaultTime
- },
- // 圆角值
- round: {
- type: [Boolean, String, Number],
- default: () => defProps.calendar.round
- },
- // 最多展示月份数量
- monthNum: {
- type: [Number, String],
- default: 3
- },
- // 是否启用非滚动的单月切换模式
- monthSwitch: {
- type: Boolean,
- default: () => defProps.calendar.monthSwitch
- },
- // 是否显示今天按钮
- showToday: {
- type: Boolean,
- default: () => defProps.calendar.showToday
- },
- // 今天日期的独立高亮颜色,默认跟随主题色
- todayColor: {
- type: String,
- default: () => defProps.calendar.todayColor
- },
- // 星期文案
- weekText: {
- type: Array,
- default: defProps.calendar.weekText
- },
- forbidDays: {
- type: Array,
- default: defProps.calendar.forbidDays
- },
- forbidDaysToast:{
- type: String,
- default: defProps.calendar.forbidDaysToast
- },
- monthFormat:{
- type: String,
- default: defProps.calendar.monthFormat
- },
- // 是否页面内展示
- pageInline:{
- type: Boolean,
- default: defProps.calendar.pageInline
- }
- }
- })
|