feat: 新增 date-picker 组件 type 属性 yearmonth 值

This commit is contained in:
就眠儀式
2022-04-02 04:18:17 +08:00
parent f28e3cbcbf
commit 38f584a374
5 changed files with 47 additions and 29 deletions

View File

@@ -95,7 +95,7 @@
</div>
<!-- 年份选择器 -->
<div class="layui-laydate" v-show="showPane === 'year'">
<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">
@@ -296,7 +296,7 @@ const els = [
export interface LayDatePickerProps {
modelValue?: string;
type?: "date" | "datetime" | "year" | "time" | "month";
type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
name?: string;
}
@@ -328,10 +328,8 @@ const dateValue = computed<string>(() => {
return "";
}
let momentVal;
let momentObj = moment(currentDay.value)
.hour(hms.value.hh)
.minute(hms.value.mm)
.second(hms.value.ss);
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");
@@ -348,6 +346,9 @@ const dateValue = computed<string>(() => {
case "time":
momentVal = momentObj.format("HH:mm:ss");
break;
case "yearmonth":
momentVal = momentObj.format("YYYY-MM");
break;
default:
momentVal = momentObj.format();
}
@@ -452,6 +453,9 @@ const handleYearClick = (item: any) => {
currentYear.value = item;
if (props.type === "year") {
currentDay.value = moment().year(item).valueOf();
} else if(props.type === 'yearmonth') {
currentDay.value = moment().year(item).valueOf();
showPane.value = "month";
} else {
showPane.value = "date";
}
@@ -461,7 +465,9 @@ const handleYearClick = (item: any) => {
const handleMonthClick = (item: any) => {
currentMonth.value = MONTH_NAME.indexOf(item);
if (props.type === "month") {
currentDay.value = moment().month(MONTH_NAME.indexOf(item)).valueOf();
currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
} else if(props.type === "yearmonth") {
currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
} else {
showPane.value = "date";
}
@@ -481,13 +487,13 @@ const choseTime = (e: any) => {
if (e.target.nodeName == "LI") {
let { value, type } = e.target.dataset;
hms.value[type as keyof typeof hms.value] = value;
e.target.scrollIntoView({ behavior: "smooth" });
}
};
onMounted(() => {
hms.value.hh = moment(currentDay.value).hour();
hms.value.mm = moment(currentDay.value).minute();
hms.value.ss = moment(currentDay.value).second();
hms.value.hh = moment(props.modelValue).hour();
hms.value.mm = moment(props.modelValue).minute();
hms.value.ss = moment(props.modelValue).second();
console.log(JSON.stringify(hms.value));
});
</script>

View File

@@ -1,13 +0,0 @@
import { useFetch } from "@vueuse/core";
export function getLayuiVueVersion() {
const { data } = useFetch(
`https://data.jsdelivr.com/v1/package/npm/@layui/layui-vue`,
{
timeout: 1000 * 2,
initialData: "",
afterFetch: (ctx) => ((ctx.data = ctx.data.tags.latest), ctx),
}
).json();
return data;
}