feat: 新增 date-picker 组件 type 属性 yearmonth 值
This commit is contained in:
就眠儀式
parent
f28e3cbcbf
commit
38f584a374
@ -138,6 +138,32 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 年月选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-date-picker type="yearmonth" v-model="endTime5"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime5 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Date Picker 属性
|
||||
:::
|
||||
|
||||
@ -146,7 +172,7 @@ export default {
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
||||
| v-model | 当前时间 | `string` | -- | — |
|
||||
| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` |
|
||||
| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` `yearmonth` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -16,9 +16,11 @@
|
||||
<li>
|
||||
<h3>1.0.0 <span class="layui-badge-rim">2022-04-01</span></h3>
|
||||
<ul>
|
||||
<li>[重要] 修订 version 为 1.0.0。</li>
|
||||
<li>[新增] switch 组件 onswitch-value 属性, 默认为 true。</li>
|
||||
<li>[新增] switch 组件 unswitch-value 属性, 默认为 false。</li>
|
||||
<li>[新增] date-picker 组件 time 属性, 支持 时 分 秒 选择。</li>
|
||||
<li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
|
||||
<li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
|
||||
<li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
|
||||
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
|
||||
|
||||
@ -216,7 +216,6 @@ import menu from "../view/utils/menus";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import zh_CN from "../locales/zh_CN.ts";
|
||||
import en_US from "../locales/en_US.ts";
|
||||
import { getLayuiVueVersion } from "../../../src/utils/getLayuiVueVersion.ts"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -265,10 +264,8 @@ export default {
|
||||
});
|
||||
});
|
||||
|
||||
const latestVer = getLayuiVueVersion();
|
||||
const layuiVueVersion = computed(() =>
|
||||
latestVer.value
|
||||
?? import.meta.env.LAYUI_VUE_VERSION
|
||||
import.meta.env.LAYUI_VUE_VERSION
|
||||
)
|
||||
|
||||
watch(isDark, () => {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user