[修正] 选择器右下角的当前值提示问题
This commit is contained in:
castleiMac
parent
71c9de04f1
commit
305eff05e5
@ -1,162 +1,205 @@
|
||||
<template>
|
||||
<div>
|
||||
<lay-dropdown ref="dropdownRef">
|
||||
<<<<<<< HEAD <lay-input :name="name" :value="dateValue" readonly="readonly"> ======= <lay-input :name="name"
|
||||
:value="dateValue || modelValue" readonly> >>>>>>> 4c653112a2fca8ef40349518d79c58ec7105e032 <template #prefix>
|
||||
<lay-icon type="layui-icon-date"></lay-icon>
|
||||
</template>
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<!-- 日期选择 -->
|
||||
<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>
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="showYearPanel">{{ currentYear }} 年</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>
|
||||
<lay-input :name="name" :value="dateValue || modelValue" readonly>
|
||||
<template #prefix>
|
||||
<lay-icon type="layui-icon-date"></lay-icon>
|
||||
</template>
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<!-- 日期选择 -->
|
||||
<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>
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="showYearPanel">{{ currentYear }} 年</span>
|
||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||
</div>
|
||||
<div class="layui-laydate-content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="(o, i) of dateList.length % 7 == 0
|
||||
<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>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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(
|
||||
: 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)">
|
||||
{{ item.day }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<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>
|
||||
</div>
|
||||
)"
|
||||
: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>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 年份选择器 -->
|
||||
<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">
|
||||
<ul class="layui-laydate-list laydate-year-list">
|
||||
<li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
|
||||
@click="handleYearClick(item)">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="layui-laydate-footer">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 年份选择器 -->
|
||||
<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-footer">
|
||||
<!-- <span
|
||||
<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)"
|
||||
>{{ item }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
class="layui-laydate-preview"
|
||||
title="当前选中的结果"
|
||||
style="color: rgb(102, 102, 102)"
|
||||
>2022</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>
|
||||
</div>
|
||||
>{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 月份选择器 -->
|
||||
<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>
|
||||
<div class="laydate-set-ym">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 月份选择器 -->
|
||||
<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>
|
||||
<div class="laydate-set-ym">
|
||||
<span
|
||||
@click="showYearPanel"
|
||||
v-if="showPane === 'date' || showPane === 'datetime'"
|
||||
>{{ currentYear }} 年</span>
|
||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||
</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="[
|
||||
<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)">
|
||||
{{ item.slice(0, 3) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
]"
|
||||
@click="handleMonthClick(item)"
|
||||
>{{ item.slice(0, 3) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<!-- <span
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
class="layui-laydate-preview"
|
||||
title="当前选中的结果"
|
||||
style="color: rgb(102, 102, 102)"
|
||||
>2021-03</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>
|
||||
</div>
|
||||
>{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间选择器 -->
|
||||
<div class="layui-laydate" v-if="showPane == 'time'">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-time-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: 210px">
|
||||
<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="[
|
||||
'num',
|
||||
index.toString().padStart(2, '0') == hms[item.type]
|
||||
? 'layui-this'
|
||||
: '',
|
||||
]">
|
||||
{{ index.toString().padStart(2, "0") }}
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 时间选择器 -->
|
||||
<div class="layui-laydate" v-if="showPane == 'time'">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
<span class="laydate-time-text">选择时间</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<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>
|
||||
</div>
|
||||
<div class="layui-laydate-content" style="height: 210px">
|
||||
<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="[
|
||||
'num',
|
||||
index.toString().padStart(2, '0') == hms[item.type]
|
||||
? 'layui-this'
|
||||
: '',
|
||||
]"
|
||||
>{{ index.toString().padStart(2, "0") }}</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="layui-laydate-footer">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
@ -240,10 +283,35 @@ const dateValue = computed<string>(() => {
|
||||
return "";
|
||||
}
|
||||
let momentVal;
|
||||
let momentObj = moment(currentDay.value || props.modelValue)
|
||||
momentVal = momentObj.format(fmtMap[props.type])
|
||||
if (momentVal != props.modelValue)
|
||||
$emits("update:modelValue", momentVal);
|
||||
let momentObj = moment(currentDay.value)
|
||||
.hour(hms.value.hh)
|
||||
.minute(hms.value.mm)
|
||||
.second(hms.value.ss);
|
||||
|
||||
switch (props.type) {
|
||||
case "date":
|
||||
momentVal = momentObj.format("YYYY-MM-DD");
|
||||
break;
|
||||
case "datetime":
|
||||
momentVal = momentObj.format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
case "year":
|
||||
momentVal = momentObj.format("YYYY");
|
||||
break;
|
||||
case "month":
|
||||
momentVal = momentObj.format("MM");
|
||||
break;
|
||||
case "time":
|
||||
momentVal = momentObj.format("HH:mm:ss");
|
||||
break;
|
||||
case "yearmonth":
|
||||
momentVal = momentObj.format("YYYY-MM");
|
||||
break;
|
||||
default:
|
||||
momentVal = momentObj.format();
|
||||
break;
|
||||
}
|
||||
$emits("update:modelValue", momentVal);
|
||||
return momentVal;
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user