🐛(component): datepicker 开启simple后点击无效,修复上一次更新带来的影响
This commit is contained in:
0o张不歪o0
parent
ce2ccd8a75
commit
00d0b7887e
@ -1,48 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<lay-dropdown ref="dropdownRef" :disabled="props.disabled">
|
||||
<lay-input
|
||||
readonly
|
||||
:name="name"
|
||||
:model-value="dateValue || modelValue"
|
||||
:placeholder="placeholder"
|
||||
prefix-icon="layui-icon-date"
|
||||
>
|
||||
<lay-input readonly :name="name" :model-value="dateValue || modelValue" :placeholder="placeholder"
|
||||
prefix-icon="layui-icon-date">
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<!-- 日期选择 -->
|
||||
<div
|
||||
class="layui-laydate"
|
||||
v-show="showPane === 'date' || showPane === 'datetime'"
|
||||
>
|
||||
<div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
|
||||
<div class="layui-laydate-main laydate-main-list-0">
|
||||
<div class="layui-laydate-header">
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-prev-y"
|
||||
@click="changeYearOrMonth('year', -1)"
|
||||
></i
|
||||
>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-prev-m"
|
||||
@click="changeYearOrMonth('month', -1)"
|
||||
></i
|
||||
>
|
||||
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
|
||||
<i class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="showYearPanel">{{ currentYear }} 年</span>
|
||||
<span @click="showPane = 'month'"
|
||||
>{{ currentMonth + 1 }} 月</span
|
||||
>
|
||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||
</div>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-next-m"
|
||||
@click="changeYearOrMonth('month', 1)"
|
||||
></i
|
||||
>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-next-y"
|
||||
@click="changeYearOrMonth('year', 1)"
|
||||
></i
|
||||
>
|
||||
<i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i>
|
||||
<i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
|
||||
</div>
|
||||
<div class="layui-laydate-content">
|
||||
<table>
|
||||
@ -52,26 +26,17 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template
|
||||
v-for="(o, i) of dateList.length % 7 == 0
|
||||
? dateList.length / 7
|
||||
: Math.floor(dateList.length / 7) + 1"
|
||||
:key="i"
|
||||
>
|
||||
<template v-for="(o, i) of dateList.length % 7 == 0
|
||||
? dateList.length / 7
|
||||
: Math.floor(dateList.length / 7) + 1" :key="i">
|
||||
<tr>
|
||||
<td
|
||||
v-for="(item, index) of dateList.slice(
|
||||
i * 7,
|
||||
i * 7 + 7
|
||||
)"
|
||||
:key="index"
|
||||
:data-unix="item.value"
|
||||
:class="{
|
||||
'laydate-day-prev': item.type !== 'current',
|
||||
'layui-this': item.value === currentDay,
|
||||
}"
|
||||
@click="handleDayClick(item)"
|
||||
>
|
||||
<td v-for="(item, index) of dateList.slice(
|
||||
i * 7,
|
||||
i * 7 + 7
|
||||
)" :key="index" :data-unix="item.value" :class="{
|
||||
'laydate-day-prev': item.type !== 'current',
|
||||
'layui-this': item.value === currentDay,
|
||||
}" @click="handleDayClick(item)">
|
||||
{{ item.day }}
|
||||
</td>
|
||||
</tr>
|
||||
@ -81,69 +46,37 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
v-if="type === 'datetime'"
|
||||
@click="showPane = 'time'"
|
||||
class="laydate-btns-time"
|
||||
>选择时间</span
|
||||
>
|
||||
<span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
||||
>清空</span
|
||||
>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
||||
>确定</span
|
||||
>
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 年份选择器 -->
|
||||
<div
|
||||
class="layui-laydate"
|
||||
v-show="showPane === 'year' || showPane === 'yearmonth'"
|
||||
>
|
||||
<div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
<span class="laydate-time-text">选择年份</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layui-laydate-content"
|
||||
style="height: 220px; overflow-y: auto"
|
||||
>
|
||||
<div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
|
||||
<ul class="layui-laydate-list laydate-year-list">
|
||||
<li
|
||||
v-for="item of yearList"
|
||||
:key="item"
|
||||
:class="[{ 'layui-this': currentYear === item }]"
|
||||
@click="handleYearClick(item)"
|
||||
>
|
||||
<li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
|
||||
@click="handleYearClick(item)">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
class="layui-laydate-preview"
|
||||
title="当前选中的结果"
|
||||
style="color: rgb(102, 102, 102)"
|
||||
>{{ dateValue }}</span
|
||||
>
|
||||
<span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
||||
>清空</span
|
||||
>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
||||
>确定</span
|
||||
>
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -151,59 +84,30 @@
|
||||
<div class="layui-laydate" v-show="showPane === 'month'">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||
<div class="layui-laydate-header">
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-prev-y"
|
||||
@click="changeYearOrMonth('year', -1)"
|
||||
></i
|
||||
>
|
||||
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
|
||||
<div class="laydate-set-ym">
|
||||
<span
|
||||
@click="showYearPanel"
|
||||
v-if="showPane === 'date' || showPane === 'datetime'"
|
||||
>{{ currentYear }} 年</span
|
||||
>
|
||||
<span @click="showPane = 'month'"
|
||||
>{{ currentMonth + 1 }} 月</span
|
||||
>
|
||||
<span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
|
||||
年</span>
|
||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||
</div>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-next-y"
|
||||
@click="changeYearOrMonth('year', 1)"
|
||||
></i
|
||||
>
|
||||
<i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 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"
|
||||
:class="[
|
||||
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
||||
]"
|
||||
@click="handleMonthClick(item)"
|
||||
>
|
||||
<li v-for="item of MONTH_NAME" :key="item" :class="[
|
||||
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
||||
]" @click="handleMonthClick(item)">
|
||||
{{ item.slice(0, 3) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
class="layui-laydate-preview"
|
||||
title="当前选中的结果"
|
||||
style="color: rgb(102, 102, 102)"
|
||||
>{{ dateValue }}</span
|
||||
>
|
||||
<span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
||||
>清空</span
|
||||
>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
||||
>确定</span
|
||||
>
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -219,19 +123,13 @@
|
||||
<ul class="layui-laydate-list laydate-time-list">
|
||||
<li class="num-list" v-for="item in els" :key="item.type">
|
||||
<ol class="scroll" @click="choseTime">
|
||||
<li
|
||||
v-for="(it, index) in item.count"
|
||||
:id="item.type + index.toString()"
|
||||
:data-value="index.toString().padStart(2, '0')"
|
||||
:data-type="item.type"
|
||||
:key="it"
|
||||
:class="[
|
||||
<li v-for="(it, index) in item.count" :id="item.type + index.toString()"
|
||||
:data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
|
||||
'num',
|
||||
index.toString().padStart(2, '0') == hms[item.type]
|
||||
? 'layui-this'
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
]">
|
||||
{{ index.toString().padStart(2, "0") }}
|
||||
</li>
|
||||
</ol>
|
||||
@ -240,22 +138,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
@click="showPane = 'date'"
|
||||
v-if="type != 'time'"
|
||||
class="laydate-btns-time"
|
||||
>返回日期</span
|
||||
>
|
||||
<span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
||||
>清空</span
|
||||
>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
||||
>确定</span
|
||||
>
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -353,7 +240,6 @@ onMounted(() => {
|
||||
|
||||
// 计算结果日期
|
||||
const dateValue = computed<string>(() => {
|
||||
currentDay.value = new Date(props.modelValue).getTime();
|
||||
if (currentDay.value === -1) {
|
||||
$emits("update:modelValue", "");
|
||||
return "";
|
||||
@ -363,7 +249,6 @@ const dateValue = computed<string>(() => {
|
||||
.hour(hms.value.hh)
|
||||
.minute(hms.value.mm)
|
||||
.second(hms.value.ss);
|
||||
|
||||
switch (props.type) {
|
||||
case "date":
|
||||
dayjsVal = dayjsObj.format("YYYY-MM-DD");
|
||||
@ -388,9 +273,12 @@ const dateValue = computed<string>(() => {
|
||||
break;
|
||||
}
|
||||
$emits("update:modelValue", dayjsVal);
|
||||
if (props.simple) {
|
||||
if (props.simple && unWatch.value) {
|
||||
ok();
|
||||
}
|
||||
setTimeout(() => {
|
||||
unWatch.value = false;
|
||||
}, 0);
|
||||
return dayjsVal;
|
||||
});
|
||||
|
||||
@ -444,7 +332,12 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const unWatch = ref(true)
|
||||
watch(() => props.modelValue, () => {
|
||||
if (!unWatch.value) {
|
||||
currentDay.value = new Date(props.modelValue).getTime();
|
||||
}
|
||||
})
|
||||
// 确认事件
|
||||
const ok = () => {
|
||||
if (dropdownRef.value)
|
||||
@ -454,6 +347,7 @@ const ok = () => {
|
||||
|
||||
// 现在时间
|
||||
const now = () => {
|
||||
unWatch.value = true
|
||||
currentDay.value = dayjs().valueOf();
|
||||
hms.value.hh = dayjs().hour();
|
||||
hms.value.mm = dayjs().minute();
|
||||
@ -462,6 +356,7 @@ const now = () => {
|
||||
|
||||
// 清空日期
|
||||
const clear = () => {
|
||||
unWatch.value = true
|
||||
currentDay.value = -1;
|
||||
};
|
||||
|
||||
@ -489,6 +384,7 @@ const showYearPanel = () => {
|
||||
|
||||
// 点击年份
|
||||
const handleYearClick = (item: any) => {
|
||||
unWatch.value = true
|
||||
currentYear.value = item;
|
||||
if (props.type === "year") {
|
||||
currentDay.value = dayjs().year(item).valueOf();
|
||||
@ -502,6 +398,7 @@ const handleYearClick = (item: any) => {
|
||||
|
||||
// 点击月份
|
||||
const handleMonthClick = (item: any) => {
|
||||
unWatch.value = true
|
||||
currentMonth.value = MONTH_NAME.indexOf(item);
|
||||
if (props.type === "month") {
|
||||
currentDay.value = dayjs(currentDay.value)
|
||||
@ -518,6 +415,7 @@ const handleMonthClick = (item: any) => {
|
||||
|
||||
// 点击日期
|
||||
const handleDayClick = (item: any) => {
|
||||
unWatch.value = true
|
||||
currentDay.value = item.value;
|
||||
if (item.type !== "current") {
|
||||
currentMonth.value =
|
||||
@ -527,6 +425,7 @@ const handleDayClick = (item: any) => {
|
||||
|
||||
// 点击时间 - hms
|
||||
const choseTime = (e: any) => {
|
||||
unWatch.value = true
|
||||
if (e.target.nodeName == "LI") {
|
||||
let { value, type } = e.target.dataset;
|
||||
hms.value[type as keyof typeof hms.value] = value;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user