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

✨(component): 发布 1.2.11 版本

Browse Source
This commit is contained in:
就眠儀式 2022-07-14 23:25:46 +08:00
parent eb09c753a5
commit 3fc0c38362
2 changed files with 64 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package/component/src/component/datePicker/day.ts
View File

@ -12,10 +12,10 @@ const getYears = () => {
/**
* 获取当前日期
*/
const getDate = (val='') => {
if(val){
const getDate = (val = "") => {
if (val) {
return new Date(val);
}else{
} else {
return new Date();
}
};
@ -23,24 +23,24 @@ const getDate = (val='') => {
/**
* 获取当前年份
*/
const getYear = (val='') => {
const getYear = (val = "") => {
return getDate(val).getFullYear();
};
/**
* 获取当前月份
*/
const getMonth = (val='') => {
const getMonth = (val = "") => {
return getDate(val).getMonth();
};
const getDay=(val='')=>{
if(val){
const getDay = (val = "") => {
if (val) {
return new Date(getDate(val).toDateString()).getTime();
}else{
} else {
return -1;
}
}
};
/**
* 获取月份天数
@ -52,4 +52,4 @@ const getDayLength = (year: number, month: number): number => {
return new Date(year, month + 1, 0).getDate();
};
export { getDayLength, getYears, getDate, getMonth, getYear,getDay };
export { getDayLength, getYears, getDate, getMonth, getYear, getDay };

83
package/component/src/component/datePicker/index.vue
View File

@ -84,7 +84,10 @@
<div class="layui-laydate-footer">
<span
v-if="type === 'datetime'"
@click="showPane = 'time';scrollToCurrentTime()"
@click="
showPane = 'time';
scrollToCurrentTime();
"
class="laydate-btns-time"
>选择时间</span
>
@ -218,8 +221,16 @@
</div>
</div>
<div class="layui-laydate-content" style="height: 210px">
<ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
<li class="num-list" v-for="item in els" :key="item.type" :data-type="item.type">
<ul
class="layui-laydate-list laydate-time-list"
ref="timePanelRef"
>
<li
class="num-list"
v-for="item in els"
:key="item.type"
:data-type="item.type"
>
<ol class="scroll" @click="choseTime">
<li
v-for="(it, index) in item.count"
@ -278,8 +289,16 @@ import dayjs from "dayjs";
import { LayIcon } from "@layui/icons-vue";
import LayInput from "../input/index.vue";
import LayDropdown from "../dropdown/index.vue";
import { getDayLength, getYears, getMonth, getYear,getDay } from "./day";
import { ref, watch, computed, defineProps, defineEmits, onMounted, nextTick } from "vue";
import { getDayLength, getYears, getMonth, getYear, getDay } from "./day";
import {
ref,
watch,
computed,
defineProps,
defineEmits,
onMounted,
nextTick,
} from "vue";
import { anyTypeAnnotation } from "@babel/types";
export interface LayDatePickerProps {
@ -339,7 +358,7 @@ const yearList = ref<number[]>(getYears());
const dateList = ref<any[]>([]);
const showPane = ref("date");
const yearmonthScrollRef=ref()
const yearmonthScrollRef = ref();
watch(
() => props.type,
@ -356,9 +375,10 @@ onMounted(() => {
clear();
}, 0);
}
let modelValue=props.modelValue;
if(modelValue.length===8){ //dayjs 解析时间容错
modelValue='1970-01-01 '+modelValue;
let modelValue = props.modelValue;
if (modelValue.length === 8) {
//dayjs 解析时间容错
modelValue = "1970-01-01 " + modelValue;
}
hms.value.hh = dayjs(modelValue).hour();
hms.value.mm = dayjs(modelValue).minute();
@ -562,45 +582,50 @@ const choseTime = (e: any) => {
}
};
const openDropDown=()=>{
nextTick(()=>{
if(showPane.value=='year'||showPane.value=='yearmonth'){
let scrollTop=0;
for (const child of yearmonthScrollRef.value.firstElementChild.childNodes) {
if(child.classList&&child.classList.contains('layui-this')){
scrollTop=child.offsetTop-(yearmonthScrollRef.value.offsetHeight-child.offsetHeight)/2;
const openDropDown = () => {
nextTick(() => {
if (showPane.value == "year" || showPane.value == "yearmonth") {
let scrollTop = 0;
for (const child of yearmonthScrollRef.value.firstElementChild
.childNodes) {
if (child.classList && child.classList.contains("layui-this")) {
scrollTop =
child.offsetTop -
(yearmonthScrollRef.value.offsetHeight - child.offsetHeight) / 2;
break;
}
}
yearmonthScrollRef.value.scrollTo(0,scrollTop)
}else if(showPane.value=='time'){
scrollToCurrentTime()
yearmonthScrollRef.value.scrollTo(0, scrollTop);
} else if (showPane.value == "time") {
scrollToCurrentTime();
}
})
}
});
};
//时间定位
const timePanelRef=ref()
const timePanelRef = ref();
const scrollToCurrentTime = () => {
nextTick(() => {
timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
if (element.nodeName === 'LI') {
if (element.nodeName === "LI") {
let scrollTop = 0;
let parentDom = element.firstElementChild as HTMLElement;
let childList = parentDom.childNodes;
for (let index = 0; index < childList.length; index++) {
const child = childList[index] as HTMLElement;
if (child.nodeName !== 'LI') {
if (child.nodeName !== "LI") {
continue;
}
if (child.classList && child.classList.contains('layui-this')) {
scrollTop = child.offsetTop - (parentDom.offsetHeight - child.offsetHeight) / 2;
parentDom.scrollTo(0, scrollTop)
if (child.classList && child.classList.contains("layui-this")) {
scrollTop =
child.offsetTop -
(parentDom.offsetHeight - child.offsetHeight) / 2;
parentDom.scrollTo(0, scrollTop);
break;
}
}
}
});
})
}
});
};
</script>