月份弹窗选择器

月份弹窗选择器组件。

基础使用

• 通过 v-model 属性绑定月份弹窗选择器的值。
• 通过 show 属性设置月份弹窗选择器是否显示。

<template>
	<pure-month-modal
		v-model="yearMonth"
		show="show"
	></pure-month-modal>

	<pure-cell
		title="预约时间"
		showArrow
		:desc="yearMonth ? yearMonth : '请选择'"
		@onClick="show = true"
	></pure-cell>
</template>

<script setup>
	import { ref } from "vue";

	// 月份弹窗选择器的值
	const yearMonth = ref("2023-08");

	// 月份弹窗选择器是否显示
	const show = ref(false);

	// 确认选择
	function onConfirm(data) {
		dateStr.value = `${data.year}年${data.month}月`;
		show.value = false;
	}
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
modelValue	[String, Number, Date]		月份弹窗选择器的值
startDate	[String, Number, Date]	new Date()	可选开始日期
endDate	[String, Number, Date]	3年后	可选结束日期
show	Boolean	false	显示状态
mask	Boolean	true	是否显示遮罩
maskClickable	Boolean	true	遮罩是否可点击关闭
direction	String	bottom	弹出方向
title	String	选择月份	标题
showClose	Boolean	false	显示关闭按钮
closeIconName	String	__close	关闭按钮图标
closeIconOpts	Object	{}	关闭按钮配置项 参考
closePosition	String	bottom	关闭按钮位置
showNot	Boolean	true	是否显示顶部取消按钮
notlText	String	关闭	顶部取消按钮文本
notTheme	String	info	顶部取消按钮主题
notOpts	Object	{}	顶部取消按钮配置项 参考
showOk	Boolean	true	是否显示顶部确认按钮
okText	String	确定	顶部确认按钮文本
okTheme	String	primary	顶部确认按钮主题
okOpts	Object	{}	顶部确认按钮配置项 参考
showCancel	Boolean	false	是否显示底部取消按钮
cancelText	String	取消	底部取消按钮文本
cancelTheme	String	info	底部取消按钮主题
cancelOpts	Object	{}	底部取消按钮配置项 参考
showConfirm	Boolean	false	是否底部显示确认按钮
confirmText	String	确认	底部确认按钮文本
confirmTheme	String	primary	底部确认按钮主题
confirmOpts	Object	{}	底部确认按钮配置项 参考
scrollable	Boolean	true	内容是否可滚动
headerLine	Boolean	false	是否显示 Header 下边框
footerLine	Boolean	false	是否显示 Footer 上边框
buttonLine	Boolean	false	是否显示底部按钮分割线
width	String		宽度
height	String		高度
maxWidth	String		最大宽度
maxHeight	String		最大高度
safeAreaBottom	Boolean	true	是否开启安全底部

事件

名称	参数	说明
onCancel		取消事件
onConfirm	{year: 年份, month: 月}	确认事件
onChange	{year: 年份, month: 月}	切换事件

样式变量

名称	说明
--pure-month-modal-year-gap	年份切换器内容间距
--pure-month-modal-year-font-size	年份切换器内容字体大小
--pure-month-modal-year-font-weight	年份切换器内容字体粗细
--pure-month-modal-year-color	年份切换器内容字体颜色
--pure-month-modal-year-margin	年份切换器外边距
--pure-month-modal-year-padding	年份切换器内边距
--pure-month-modal-year-text-font-size	年份字体大小
--pure-month-modal-year-text-font-weight	年份字体粗细
--pure-month-modal-year-text-color	年份字体颜色
--pure-month-modal-year-text-margin	年份文字外边距
--pure-month-modal-year-text-padding	年份文字内边距
--pure-month-modal-year-icon-font-size	年份切换器图标字体大小
--pure-month-modal-year-icon-font-weight	年份切换器图标字体粗细
--pure-month-modal-year-icon-color	年份切换器图标字体颜色
--pure-month-modal-year-icon-margin	年份切换器图标外边距
--pure-month-modal-year-icon-padding	年份切换器图标内边距
--pure-month-modal-year-icon-disabled-color	年份切换器图标禁用字体颜色
--pure-month-modal-year-icon-disabled-opacity	年份切换器图标禁用透明度
--pure-month-modal-body-padding	主内容内边距
--pure-month-modal-body-margin	主内容外边距
--pure-month-modal-body-background-color	主内容背景颜色
--pure-month-modal-months-columns	月份列数
--pure-month-modal-months-gap	月份间距
--pure-month-modal-months-background-color	月份容器背景
--pure-month-modal-months-border-radius	月份容器圆角
--pure-month-modal-month-padding	月份项内边距
--pure-month-modal-month-border-radius	月份项圆角
--pure-month-modal-month-transition	月份项过渡
--pure-month-modal-month-font-size	月份项字体大小
--pure-month-modal-month-font-weight	月份项字体粗细
--pure-month-modal-month-color	月份项字体颜色
--pure-month-modal-month-background	月份项背景
--pure-month-modal-month-text-width	月份文字宽度
--pure-month-modal-month-text-height	月份文字高度
--pure-month-modal-month-text-background	月份文字背景
--pure-month-modal-month-select-background	月份项选中背景
--pure-month-modal-month-select-color	月份项选中字体颜色
--pure-month-modal-month-select-font-weight	月份项选中字体粗细
--pure-month-modal-month-select-font-size	月份项选中字体大小
--pure-month-modal-month-select-text-background	月份项选中文字背景
--pure-month-modal-month-disabled-background	月份项禁用背景
--pure-month-modal-month-disabled-color	月份项禁用字体颜色
--pure-month-modal-month-disabled-opacity	月份项禁用透明度
--pure-month-modal-month-disabled-font-weight	月份项禁用字体粗细
--pure-month-modal-month-disabled-font-size	月份项禁用字体大小
--pure-month-modal-month-disabled-text-background	月份项禁用文字背景