📝(select): update
This commit is contained in:
就眠儀式
parent
7e9178f7f4
commit
f134d04685
@ -279,16 +279,22 @@ const closeRightMonthPanel = () => {
|
||||
const footOnOk = () => {
|
||||
let format =
|
||||
datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
|
||||
let startTimeVal =startTime.day!==-1&&endTime.day!==-1?dayjs(startTime.day)
|
||||
let startTimeVal =
|
||||
startTime.day !== -1 && endTime.day !== -1
|
||||
? dayjs(startTime.day)
|
||||
.hour(startTime.hms.hh)
|
||||
.minute(startTime.hms.mm)
|
||||
.second(startTime.hms.ss)
|
||||
.format(format):'';
|
||||
let endTimeVal = startTime.day!==-1&&endTime.day!==-1?dayjs(endTime.day)
|
||||
.format(format)
|
||||
: "";
|
||||
let endTimeVal =
|
||||
startTime.day !== -1 && endTime.day !== -1
|
||||
? dayjs(endTime.day)
|
||||
.hour(endTime.hms.hh)
|
||||
.minute(endTime.hms.mm)
|
||||
.second(endTime.hms.ss)
|
||||
.format(format):'';
|
||||
.format(format)
|
||||
: "";
|
||||
emits("update:startTime", startTimeVal);
|
||||
emits("update:endTime", endTimeVal);
|
||||
datePicker.ok();
|
||||
@ -296,18 +302,18 @@ const footOnOk = () => {
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
startTime.year=dayjs().year();
|
||||
startTime.month=dayjs().month();
|
||||
startTime.day=new Date(new Date().toDateString()).getTime();
|
||||
startTime.hms.hh=dayjs().hour();
|
||||
startTime.hms.mm=dayjs().minute();
|
||||
startTime.hms.ss=dayjs().second();
|
||||
endTime.day=-1;
|
||||
startTime.year = dayjs().year();
|
||||
startTime.month = dayjs().month();
|
||||
startTime.day = new Date(new Date().toDateString()).getTime();
|
||||
startTime.hms.hh = dayjs().hour();
|
||||
startTime.hms.mm = dayjs().minute();
|
||||
startTime.hms.ss = dayjs().second();
|
||||
endTime.day = -1;
|
||||
};
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
startTime.day=-1;
|
||||
endTime.day=-1;
|
||||
startTime.day = -1;
|
||||
endTime.day = -1;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,21 +3,43 @@
|
||||
<div style="display: flex">
|
||||
<div class="layui-laydate-main laydate-main-list-0">
|
||||
<div class="layui-laydate-header">
|
||||
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYear(-1)"></i>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-prev-y"
|
||||
@click="changeYear(-1)"
|
||||
></i
|
||||
>
|
||||
<div class="laydate-set-ym">
|
||||
<lay-dropdown ref="dropdownYearPanelRefLeft">
|
||||
<span class="laydate-range-time">{{ startTime.year || "--" }}年</span>
|
||||
<span class="laydate-range-time"
|
||||
>{{ startTime.year || "--" }}年</span
|
||||
>
|
||||
<template #content>
|
||||
<YearPanel class="time-panel" v-model="startTime.year" @ok="closeLeftYearPanel"></YearPanel>
|
||||
<YearPanel
|
||||
class="time-panel"
|
||||
v-model="startTime.year"
|
||||
@ok="closeLeftYearPanel"
|
||||
></YearPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-content" style="height: 220px">
|
||||
<ul class="layui-laydate-list laydate-month-list">
|
||||
<li v-for="item of MONTH_NAME" :key="item" :data-unix="getUnix(item, 'left')"
|
||||
:class="{ 'layui-this': getUnix(item, 'left') === startTime.unix || getUnix(item, 'left') === endTime.unix, 'laydate-range-hover': ifHasRangeHoverClass(getUnix(item, 'left')) }"
|
||||
@click="handleMonthClick(getUnix(item, 'left'))" @mouseenter="monthItemMouseEnter($event, item)">
|
||||
<li
|
||||
v-for="item of MONTH_NAME"
|
||||
:key="item"
|
||||
:data-unix="getUnix(item, 'left')"
|
||||
:class="{
|
||||
'layui-this':
|
||||
getUnix(item, 'left') === startTime.unix ||
|
||||
getUnix(item, 'left') === endTime.unix,
|
||||
'laydate-range-hover': ifHasRangeHoverClass(
|
||||
getUnix(item, 'left')
|
||||
),
|
||||
}"
|
||||
@click="handleMonthClick(getUnix(item, 'left'))"
|
||||
@mouseenter="monthItemMouseEnter($event, item)"
|
||||
>
|
||||
{{ item.slice(0, 3) }}
|
||||
</li>
|
||||
</ul>
|
||||
@ -29,17 +51,37 @@
|
||||
<lay-dropdown ref="dropdownYearPanelRefRight">
|
||||
<span class="laydate-range-time">{{ startTime.year + 1 }}年</span>
|
||||
<template #content>
|
||||
<YearPanel class="time-panel" v-model="endTime.year" @ok="closeRightYearPanel"></YearPanel>
|
||||
<YearPanel
|
||||
class="time-panel"
|
||||
v-model="endTime.year"
|
||||
@ok="closeRightYearPanel"
|
||||
></YearPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
<i class="layui-icon laydate-icon laydate-next-y" @click="changeYear(1)"></i>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-next-y"
|
||||
@click="changeYear(1)"
|
||||
></i
|
||||
>
|
||||
</div>
|
||||
<div class="layui-laydate-content" style="height: 220px">
|
||||
<ul class="layui-laydate-list laydate-month-list">
|
||||
<li v-for="item of MONTH_NAME" :key="item" :data-unix="getUnix(item, 'right')"
|
||||
:class="{ 'layui-this': getUnix(item, 'right') === startTime.unix || getUnix(item, 'right') === endTime.unix, 'laydate-range-hover': ifHasRangeHoverClass(getUnix(item, 'right')) }"
|
||||
@click="handleMonthClick(getUnix(item, 'right'))" @mouseenter="monthItemMouseEnter($event, item)">
|
||||
<li
|
||||
v-for="item of MONTH_NAME"
|
||||
:key="item"
|
||||
:data-unix="getUnix(item, 'right')"
|
||||
:class="{
|
||||
'layui-this':
|
||||
getUnix(item, 'right') === startTime.unix ||
|
||||
getUnix(item, 'right') === endTime.unix,
|
||||
'laydate-range-hover': ifHasRangeHoverClass(
|
||||
getUnix(item, 'right')
|
||||
),
|
||||
}"
|
||||
@click="handleMonthClick(getUnix(item, 'right'))"
|
||||
@mouseenter="monthItemMouseEnter($event, item)"
|
||||
>
|
||||
{{ item.slice(0, 3) }}
|
||||
</li>
|
||||
</ul>
|
||||
@ -83,11 +125,15 @@ const datePicker: provideType = inject("datePicker") as provideType;
|
||||
|
||||
const startTime = reactive({
|
||||
year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
|
||||
unix: props.startTime ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf() : -1,
|
||||
unix: props.startTime
|
||||
? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
|
||||
: -1,
|
||||
});
|
||||
const endTime = reactive({
|
||||
year: props.endTime ? dayjs(props.endTime).year() : dayjs().year() + 1,
|
||||
unix: props.startTime ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() : -1,
|
||||
unix: props.startTime
|
||||
? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
|
||||
: -1,
|
||||
});
|
||||
let hoverMonth = ref(-1);
|
||||
const MONTH_NAME = [
|
||||
@ -134,11 +180,17 @@ const handleMonthClick = (item: number) => {
|
||||
watch(
|
||||
() => [props.startTime, props.endTime],
|
||||
() => {
|
||||
startTime.year = props.startTime ? dayjs(props.startTime).year() : dayjs().year();
|
||||
startTime.unix = props.startTime ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf() : -1;
|
||||
startTime.year = props.startTime
|
||||
? dayjs(props.startTime).year()
|
||||
: dayjs().year();
|
||||
startTime.unix = props.startTime
|
||||
? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
|
||||
: -1;
|
||||
endTime.year = props.endTime ? dayjs(props.endTime).year() : dayjs().year();
|
||||
endTime.unix = props.startTime ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() : -1;
|
||||
},
|
||||
endTime.unix = props.startTime
|
||||
? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
|
||||
: -1;
|
||||
}
|
||||
);
|
||||
|
||||
//关闭选择时间的面板
|
||||
@ -155,8 +207,14 @@ const closeRightYearPanel = () => {
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
let format = "YYYY-MM";
|
||||
let startTimeVal = startTime.unix !== -1 && endTime.unix !== -1 ? dayjs(startTime.unix).format(format) : '';
|
||||
let endTimeVal = endTime.unix !== -1 && endTime.unix !== -1 ? dayjs(endTime.unix).format(format) : '';
|
||||
let startTimeVal =
|
||||
startTime.unix !== -1 && endTime.unix !== -1
|
||||
? dayjs(startTime.unix).format(format)
|
||||
: "";
|
||||
let endTimeVal =
|
||||
endTime.unix !== -1 && endTime.unix !== -1
|
||||
? dayjs(endTime.unix).format(format)
|
||||
: "";
|
||||
emits("update:startTime", startTimeVal);
|
||||
emits("update:endTime", endTimeVal);
|
||||
datePicker.ok();
|
||||
@ -165,7 +223,9 @@ const footOnOk = () => {
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
startTime.year = dayjs().year();
|
||||
startTime.unix = dayjs(startTime.year + '-' + (dayjs().month() + 1)).valueOf();
|
||||
startTime.unix = dayjs(
|
||||
startTime.year + "-" + (dayjs().month() + 1)
|
||||
).valueOf();
|
||||
endTime.unix = -1;
|
||||
hoverMonth.value = -1;
|
||||
};
|
||||
@ -188,7 +248,9 @@ const monthItemMouseEnter = (event: MouseEvent, item: any) => {
|
||||
hoverMonth.value = -1;
|
||||
return;
|
||||
}
|
||||
hoverMonth.value = parseInt((event.target as HTMLElement).dataset.unix as string);
|
||||
hoverMonth.value = parseInt(
|
||||
(event.target as HTMLElement).dataset.unix as string
|
||||
);
|
||||
};
|
||||
const ifHasRangeHoverClass = computed(() => {
|
||||
return function (item: any) {
|
||||
@ -212,10 +274,10 @@ const ifHasRangeHoverClass = computed(() => {
|
||||
});
|
||||
|
||||
const getUnix = computed(() => {
|
||||
return function (item: any, position: 'left' | 'right') {
|
||||
return function (item: any, position: "left" | "right") {
|
||||
let month = MONTH_NAME.indexOf(item);
|
||||
let year = position === 'left' ? startTime.year : startTime.year + 1;
|
||||
return dayjs(year + '-' + (month + 1)).valueOf();
|
||||
}
|
||||
})
|
||||
let year = position === "left" ? startTime.year : startTime.year + 1;
|
||||
return dayjs(year + "-" + (month + 1)).valueOf();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,33 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
|
||||
<lay-input readonly :name="name" :model-value="(dateValue as string)" :placeholder="placeholder"
|
||||
prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range">
|
||||
<lay-dropdown
|
||||
ref="dropdownRef"
|
||||
:disabled="disabled"
|
||||
:autoFitMinWidth="false"
|
||||
>
|
||||
<lay-input
|
||||
readonly
|
||||
:name="name"
|
||||
:model-value="(dateValue as string)"
|
||||
:placeholder="placeholder"
|
||||
prefix-icon="layui-icon-date"
|
||||
:disabled="disabled"
|
||||
v-if="!range"
|
||||
>
|
||||
</lay-input>
|
||||
<div class="laydate-range-inputs" v-else>
|
||||
<lay-input readonly :name="name" :model-value="dateValue[0]" :disabled="disabled" class="start-input">
|
||||
<lay-input
|
||||
readonly
|
||||
:name="name"
|
||||
:model-value="dateValue[0]"
|
||||
:disabled="disabled"
|
||||
class="start-input"
|
||||
>
|
||||
</lay-input>
|
||||
<span class="range-separator">{{ rangeSeparator }}</span>
|
||||
<lay-input readonly :name="name" :model-value="dateValue[1]" :disabled="disabled" class="end-input">
|
||||
<lay-input
|
||||
readonly
|
||||
:name="name"
|
||||
:model-value="dateValue[1]"
|
||||
:disabled="disabled"
|
||||
class="end-input"
|
||||
>
|
||||
</lay-input>
|
||||
</div>
|
||||
|
||||
<template #content>
|
||||
<!-- 日期选择 -->
|
||||
<DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')" v-model="currentDay"></DatePanel>
|
||||
<DatePanel
|
||||
v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
v-model="currentDay"
|
||||
></DatePanel>
|
||||
<!-- 时间选择 -->
|
||||
<TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></TimePanel>
|
||||
<TimePanel
|
||||
v-if="!range && showPanel === 'time'"
|
||||
v-model="hms"
|
||||
></TimePanel>
|
||||
<!-- 年份选择器 -->
|
||||
<YearPanel v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')" v-model="currentYear">
|
||||
<YearPanel
|
||||
v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
|
||||
v-model="currentYear"
|
||||
>
|
||||
</YearPanel>
|
||||
<!-- 月份选择器 -->
|
||||
<MonthPanel v-if="!range && showPanel === 'month'" v-model="currentMonth"></MonthPanel>
|
||||
<MonthPanel
|
||||
v-if="!range && showPanel === 'month'"
|
||||
v-model="currentMonth"
|
||||
></MonthPanel>
|
||||
<!-- 范围选择 -->
|
||||
<DateRange v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
v-model:startTime="rangeValue.first" v-model:endTime="rangeValue.last"></DateRange>
|
||||
<DateRange
|
||||
v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
v-model:startTime="rangeValue.first"
|
||||
v-model:endTime="rangeValue.last"
|
||||
></DateRange>
|
||||
|
||||
<MonthRange v-if="range && showPanel === 'yearmonth'" v-model:startTime="rangeValue.first"
|
||||
v-model:endTime="rangeValue.last">
|
||||
<MonthRange
|
||||
v-if="range && showPanel === 'yearmonth'"
|
||||
v-model:startTime="rangeValue.first"
|
||||
v-model:endTime="rangeValue.last"
|
||||
>
|
||||
</MonthRange>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
@ -168,16 +209,16 @@ const getDateValueByRange = () => {
|
||||
$emits("update:modelValue", dateValue.value);
|
||||
return;
|
||||
}
|
||||
let format ="YYYY-MM-DD";
|
||||
let format = "YYYY-MM-DD";
|
||||
switch (props.type) {
|
||||
case "date":
|
||||
format = 'YYYY-MM-DD';
|
||||
format = "YYYY-MM-DD";
|
||||
break;
|
||||
case "datetime":
|
||||
format = 'YYYY-MM-DD HH:mm:ss';
|
||||
format = "YYYY-MM-DD HH:mm:ss";
|
||||
break;
|
||||
case "yearmonth":
|
||||
format = 'YYYY-MM';
|
||||
format = "YYYY-MM";
|
||||
break;
|
||||
}
|
||||
dateValue.value = [
|
||||
|
||||
@ -263,6 +263,9 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-select v-model="mvalue" @change="change" multiple>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码" disabled></lay-select-option>
|
||||
@ -272,7 +275,6 @@ export default {
|
||||
<lay-select-option value="6" label="打篮球"></lay-select-option>
|
||||
<lay-select-option value="7" label="rap"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user