feat:还原更新框架
This commit is contained in:
@@ -1,22 +1,21 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 3.0
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : jry
|
||||
* @lastTime : 2025-12-19 08:55:21
|
||||
* @FilePath : /uview-plus/libs/config/props/calendar.js
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-20 16:52:43
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/calendar.js
|
||||
*/
|
||||
import { t } from '../../libs/i18n'
|
||||
export default {
|
||||
// calendar 组件
|
||||
calendar: {
|
||||
title: t("up.calendar.chooseDates"),
|
||||
title: '日期选择',
|
||||
showTitle: true,
|
||||
showSubtitle: true,
|
||||
mode: 'single',
|
||||
startText: t("up.common.start"),
|
||||
endText: t("up.common.end"),
|
||||
startText: '开始',
|
||||
endText: '结束',
|
||||
customList: [],
|
||||
color: '#3c9cff',
|
||||
minDate: 0,
|
||||
@@ -27,37 +26,20 @@ export default {
|
||||
formatter: null,
|
||||
showLunar: false,
|
||||
showMark: true,
|
||||
confirmText: t("up.common.confirm"),
|
||||
confirmDisabledText: t("up.common.confirm"),
|
||||
confirmText: '确定',
|
||||
confirmDisabledText: '确定',
|
||||
show: false,
|
||||
closeOnClickOverlay: false,
|
||||
readonly: false,
|
||||
showConfirm: true,
|
||||
maxRange: Number.MAX_SAFE_INTEGER, // Infinity
|
||||
rangePrompt: '',
|
||||
showRangePrompt: true,
|
||||
allowSameDay: false,
|
||||
rangeResultMode: 'all',
|
||||
enableTime: false,
|
||||
timePrecision: 'minute',
|
||||
defaultTime: '',
|
||||
round: 0,
|
||||
overlay: true,
|
||||
duration: 300,
|
||||
overlayStyle: {},
|
||||
overlayOpacity: 0.5,
|
||||
zIndex: 10075,
|
||||
safeAreaInsetBottom: true,
|
||||
safeAreaInsetTop: false,
|
||||
bgColor: '',
|
||||
monthNum: 3,
|
||||
monthSwitch: false,
|
||||
showToday: true,
|
||||
todayColor: '',
|
||||
weekText: [t("up.week.one"), t("up.week.two"), t("up.week.three"), t("up.week.four"), t("up.week.five"), t("up.week.six"), t("up.week.seven")],
|
||||
rangePrompt: '',
|
||||
showRangePrompt: true,
|
||||
allowSameDay: false,
|
||||
round: 0,
|
||||
monthNum: 3,
|
||||
weekText: ['一', '二', '三', '四', '五', '六', '日'],
|
||||
forbidDays: [],
|
||||
forbidDaysToast: t("up.calendar.disabled"),
|
||||
monthFormat: '',
|
||||
pageInline: false
|
||||
forbidDaysToast: '该日期已禁用',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,42 +4,10 @@
|
||||
class="u-calendar-header__title"
|
||||
v-if="showTitle"
|
||||
>{{ title }}</text>
|
||||
<view
|
||||
class="u-calendar-header__subtitle-wrap"
|
||||
v-if="showSubtitle"
|
||||
>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': prevYearDisabled }"
|
||||
@click="prevYear"
|
||||
>«</text>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': prevDisabled }"
|
||||
@click="prev"
|
||||
>‹</text>
|
||||
<text class="u-calendar-header__subtitle">{{ subtitle }}</text>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': nextDisabled }"
|
||||
@click="next"
|
||||
>›</text>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': nextYearDisabled }"
|
||||
@click="nextYear"
|
||||
>»</text>
|
||||
<text
|
||||
v-if="showToday"
|
||||
class="u-calendar-header__today"
|
||||
:class="{ 'u-calendar-header__today--disabled': todayDisabled }"
|
||||
@click="today"
|
||||
>{{ todayText }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="u-calendar-header__subtitle"
|
||||
v-if="showSubtitle"
|
||||
>{{ subtitle }}</text>
|
||||
<view class="u-calendar-header__weekdays">
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
|
||||
@@ -83,86 +51,25 @@
|
||||
weekText: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
return ['一', '二', '三', '四', '五', '六', '日']
|
||||
}
|
||||
},
|
||||
// 是否显示月份切换按钮
|
||||
showSwitch: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 上个月按钮是否禁用
|
||||
prevDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 下个月按钮是否禁用
|
||||
nextDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 上一年按钮是否禁用
|
||||
prevYearDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 下一年按钮是否禁用
|
||||
nextYearDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示今天按钮
|
||||
showToday: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 今天按钮文案
|
||||
todayText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 今天按钮是否禁用
|
||||
todayDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prev() {
|
||||
if (!this.prevDisabled) {
|
||||
this.$emit('prev')
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (!this.nextDisabled) {
|
||||
this.$emit('next')
|
||||
}
|
||||
},
|
||||
prevYear() {
|
||||
if (!this.prevYearDisabled) {
|
||||
this.$emit('prevYear')
|
||||
}
|
||||
},
|
||||
nextYear() {
|
||||
if (!this.nextYearDisabled) {
|
||||
this.$emit('nextYear')
|
||||
}
|
||||
},
|
||||
today() {
|
||||
if (!this.todayDisabled) {
|
||||
this.$emit('today')
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
name() {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-calendar-header {
|
||||
display: flex;
|
||||
@@ -171,70 +78,33 @@
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
color: $u-main-color;
|
||||
text-align: center;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__subtitle-wrap {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
&__switch {
|
||||
width: 44px;
|
||||
color: $u-main-color;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
&__weekdays {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
&__weekdays {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__weekday {
|
||||
font-size: 13px;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
color: $u-main-color;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__today {
|
||||
margin-left: 4px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--up-primary, $u-primary);
|
||||
border: 1px solid var(--up-primary, $u-primary);
|
||||
flex-shrink: 0;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,246 +1,160 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
|
||||
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
|
||||
},
|
||||
// 是否允许点击遮罩关闭日历
|
||||
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
|
||||
},
|
||||
// 圆角值
|
||||
round: {
|
||||
type: [Boolean, String, Number],
|
||||
default: () => defProps.calendar.round
|
||||
},
|
||||
// 最多展示月份数量
|
||||
monthNum: {
|
||||
type: [Number, String],
|
||||
default: 3
|
||||
},
|
||||
// 星期文案
|
||||
weekText: {
|
||||
type: Array,
|
||||
default: defProps.calendar.weekText
|
||||
},
|
||||
forbidDays: {
|
||||
type: Array,
|
||||
default: defProps.calendar.forbidDays
|
||||
},
|
||||
forbidDaysToast:{
|
||||
type: String,
|
||||
default: defProps.calendar.forbidDaysToast
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,86 +1,86 @@
|
||||
import dayjs from '../u-datetime-picker/dayjs.esm.min.js';
|
||||
export default {
|
||||
methods: {
|
||||
// 设置月份数据
|
||||
setMonth() {
|
||||
// 月初是周几
|
||||
const day = dayjs(this.date).date(1).day()
|
||||
const start = day == 0 ? 6 : day - 1
|
||||
|
||||
// 本月天数
|
||||
const days = dayjs(this.date).endOf('month').format('D')
|
||||
|
||||
// 上个月天数
|
||||
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
|
||||
|
||||
// 日期数据
|
||||
const arr = []
|
||||
// 清空表格
|
||||
this.month = []
|
||||
|
||||
// 添加上月数据
|
||||
arr.push(
|
||||
...new Array(start).fill(1).map((e, i) => {
|
||||
const day = prevDays - start + i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加本月数据
|
||||
arr.push(
|
||||
...new Array(days - 0).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加下个月
|
||||
arr.push(
|
||||
...new Array(42 - days - start).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 分割数组
|
||||
for (let n = 0; n < arr.length; n += 7) {
|
||||
this.month.push(
|
||||
arr.slice(n, n + 7).map((e, i) => {
|
||||
e.index = i + n
|
||||
|
||||
// 自定义信息
|
||||
const custom = this.customList.find((c) => c.date == e.date)
|
||||
|
||||
// 农历
|
||||
if (this.lunar) {
|
||||
const {
|
||||
IDayCn,
|
||||
IMonthCn
|
||||
} = this.getLunar(e.date)
|
||||
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
|
||||
}
|
||||
|
||||
return {
|
||||
...e,
|
||||
...custom
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
import dayjs from 'dayjs/esm/index'
|
||||
export default {
|
||||
methods: {
|
||||
// 设置月份数据
|
||||
setMonth() {
|
||||
// 月初是周几
|
||||
const day = dayjs(this.date).date(1).day()
|
||||
const start = day == 0 ? 6 : day - 1
|
||||
|
||||
// 本月天数
|
||||
const days = dayjs(this.date).endOf('month').format('D')
|
||||
|
||||
// 上个月天数
|
||||
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
|
||||
|
||||
// 日期数据
|
||||
const arr = []
|
||||
// 清空表格
|
||||
this.month = []
|
||||
|
||||
// 添加上月数据
|
||||
arr.push(
|
||||
...new Array(start).fill(1).map((e, i) => {
|
||||
const day = prevDays - start + i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加本月数据
|
||||
arr.push(
|
||||
...new Array(days - 0).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加下个月
|
||||
arr.push(
|
||||
...new Array(42 - days - start).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 分割数组
|
||||
for (let n = 0; n < arr.length; n += 7) {
|
||||
this.month.push(
|
||||
arr.slice(n, n + 7).map((e, i) => {
|
||||
e.index = i + n
|
||||
|
||||
// 自定义信息
|
||||
const custom = this.customList.find((c) => c.date == e.date)
|
||||
|
||||
// 农历
|
||||
if (this.lunar) {
|
||||
const {
|
||||
IDayCn,
|
||||
IMonthCn
|
||||
} = this.getLunar(e.date)
|
||||
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
|
||||
}
|
||||
|
||||
return {
|
||||
...e,
|
||||
...custom
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user