theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[修正] 选择器右下角的当前值提示问题

Browse Source
This commit is contained in:
castleiMac 2022-04-03 20:35:45 +08:00
parent 71c9de04f1
commit 305eff05e5
1 changed files with 203 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

338
src/component/datePicker/index.vue
View File

@ -1,162 +1,205 @@
<template> <template>
<div> <div>
<lay-dropdown ref="dropdownRef"> <lay-dropdown ref="dropdownRef">
<<<<<<< HEAD <lay-input :name="name" :value="dateValue" readonly="readonly"> ======= <lay-input :name="name" <lay-input :name="name" :value="dateValue || modelValue" readonly>
:value="dateValue || modelValue" readonly> >>>>>>> 4c653112a2fca8ef40349518d79c58ec7105e032 <template #prefix> <template #prefix>
<lay-icon type="layui-icon-date"></lay-icon> <lay-icon type="layui-icon-date"></lay-icon>
</template> </template>
</lay-input> </lay-input>
<template #content> <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-main laydate-main-list-0">
<div class="layui-laydate-header"> <div class="layui-laydate-header">
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i><i <i
class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i> class="layui-icon laydate-icon laydate-prev-y"
<div class="laydate-set-ym"> @click="changeYearOrMonth('year', -1)"
<span @click="showYearPanel">{{ currentYear }} 年</span><span ></i>
@click="showPane = 'month'">{{ currentMonth + 1 }} 月</span> <i
</div> class="layui-icon laydate-icon laydate-prev-m"
<i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i><i @click="changeYearOrMonth('month', -1)"
class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i> ></i>
<div class="laydate-set-ym">
<span @click="showYearPanel">{{ currentYear }} 年</span>
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
</div> </div>
<div class="layui-laydate-content"> <i
<table> class="layui-icon laydate-icon laydate-next-m"
<thead> @click="changeYearOrMonth('month', 1)"
<tr> ></i>
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th> <i
</tr> class="layui-icon laydate-icon laydate-next-y"
</thead> @click="changeYearOrMonth('year', 1)"
<tbody> ></i>
<template v-for="(o, i) of dateList.length % 7 == 0 </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 ? dateList.length / 7
: Math.floor(dateList.length / 7) + 1" :key="i"> : Math.floor(dateList.length / 7) + 1"
<tr> :key="i"
<td v-for="(item, index) of dateList.slice( >
<tr>
<td
v-for="(item, index) of dateList.slice(
i * 7, i * 7,
i * 7 + 7 i * 7 + 7
)" :key="index" :data-unix="item.value" :class="{ )"
'laydate-day-prev': item.type !== 'current', :key="index"
'layui-this': item.value === currentDay, :data-unix="item.value"
}" @click="handleDayClick(item)"> :class="{
{{ item.day }} 'laydate-day-prev': item.type !== 'current',
</td> 'layui-this': item.value === currentDay,
</tr> }"
</template> @click="handleDayClick(item)"
</tbody> >{{ item.day }}</td>
</table> </tr>
</div> </template>
</div> </tbody>
<div class="layui-laydate-footer"> </table>
<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> </div>
<!-- 年份选择器 --> <div class="layui-laydate-footer">
<div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'"> <span
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show"> v-if="type === 'datetime'"
<div class="layui-laydate-header"> @click="showPane = 'time'"
<div class="laydate-set-ym"> class="laydate-btns-time"
<span class="laydate-time-text">选择年份</span> >选择时间</span>
</div> <div class="laydate-footer-btns">
</div> <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
<div class="layui-laydate-content" style="height: 220px; overflow-y: auto"> <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
<ul class="layui-laydate-list laydate-year-list"> <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
<li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]" </div>
@click="handleYearClick(item)"> </div>
{{ item }} </div>
</li>
</ul> <!-- 年份选择器 -->
<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> </div>
<div class="layui-laydate-footer"> <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
<!-- <span <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" class="layui-laydate-preview"
title="当前选中的结果" title="当前选中的结果"
style="color: rgb(102, 102, 102)" style="color: rgb(102, 102, 102)"
>2022</span>--> >{{ dateValue }}</span>
<div class="laydate-footer-btns"> <div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now" <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm" <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
@click="ok">确定</span> <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
</div>
</div> </div>
</div> </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"> <div class="layui-laydate" v-show="showPane === 'month'">
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i> <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
<div class="laydate-set-ym"> <div class="layui-laydate-header">
<span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }} <i
年</span> class="layui-icon laydate-icon laydate-prev-y"
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span> @click="changeYearOrMonth('year', -1)"
</div> ></i>
<i class="layui-icon laydate-icon laydate-next-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>
<div class="layui-laydate-content" style="height: 220px"> <i
<ul class="layui-laydate-list laydate-month-list"> class="layui-icon laydate-icon laydate-next-y"
<li v-for="item of MONTH_NAME" :key="item" :class="[ @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 }, { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
]" @click="handleMonthClick(item)"> ]"
{{ item.slice(0, 3) }} @click="handleMonthClick(item)"
</li> >{{ item.slice(0, 3) }}</li>
</ul> </ul>
</div>
</div> </div>
<div class="layui-laydate-footer"> </div>
<!-- <span <div class="layui-laydate-footer">
<span
class="layui-laydate-preview" class="layui-laydate-preview"
title="当前选中的结果" title="当前选中的结果"
style="color: rgb(102, 102, 102)" style="color: rgb(102, 102, 102)"
>2021-03</span>--> >{{ dateValue }}</span>
<div class="laydate-footer-btns"> <div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now" <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm" <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
@click="ok">确定</span> <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
</div>
</div> </div>
</div> </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="layui-laydate" v-if="showPane == 'time'">
<div class="laydate-set-ym"> <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
<span class="laydate-time-text">选择时间</span> <div class="layui-laydate-header">
</div> <div class="laydate-set-ym">
</div> <span class="laydate-time-text">选择时间</span>
<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>
</div> </div>
<div class="layui-laydate-footer"> <div class="layui-laydate-content" style="height: 210px">
<span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span> <ul class="layui-laydate-list laydate-time-list">
<div class="laydate-footer-btns"> <li class="num-list" v-for="item in els" :key="item.type">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now" <ol class="scroll" @click="choseTime">
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm" <li
@click="ok">确定</span> v-for="(it, index) in item.count"
</div> :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>
</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> </lay-dropdown>
</div> </div>
</template> </template>
@ -240,10 +283,35 @@ const dateValue = computed<string>(() => {
return ""; return "";
} }
let momentVal; let momentVal;
let momentObj = moment(currentDay.value || props.modelValue) let momentObj = moment(currentDay.value)
momentVal = momentObj.format(fmtMap[props.type]) .hour(hms.value.hh)
if (momentVal != props.modelValue) .minute(hms.value.mm)
$emits("update:modelValue", momentVal); .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; return momentVal;
}); });