From 3a42d6d6c6fea8a08a948c0a288636d9ebe1d277 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Fri, 19 Jan 2024 16:12:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en.yaml | 1 + locales/zh-CN.yaml | 1 + src/router/modules/components.ts | 8 + src/views/components/color-picker.vue | 3 + src/views/components/date-picker.vue | 3 + src/views/components/datetime-picker.vue | 281 +++++++++++++++++++++++ src/views/components/el-button.vue | 3 + 7 files changed, 300 insertions(+) create mode 100644 src/views/components/datetime-picker.vue diff --git a/locales/en.yaml b/locales/en.yaml index 016f22476..e427a0464 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -58,6 +58,7 @@ menus: hsjsoneditor: JSON Editor hsColorPicker: Color Picker hsDatePicker: Date Picker + hsDateTimePicker: DateTimePicker hsmenus: MultiLevel Menu hsmenu1: Menu1 hsmenu1-1: Menu1-1 diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index bb1c8f3ac..47ca1fc52 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -58,6 +58,7 @@ menus: hsjsoneditor: JSON编辑器 hsColorPicker: 颜色选择器 hsDatePicker: 日期选择器 + hsDateTimePicker: 日期时间选择器 hsmenus: 多级菜单 hsmenu1: 菜单1 hsmenu1-1: 菜单1-1 diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts index d0fd78fc4..83f433784 100644 --- a/src/router/modules/components.ts +++ b/src/router/modules/components.ts @@ -34,6 +34,14 @@ export default { title: $t("menus.hsDatePicker") } }, + { + path: "/components/datetime-picker", + name: "DateTimePicker", + component: () => import("@/views/components/datetime-picker.vue"), + meta: { + title: $t("menus.hsDateTimePicker") + } + }, { path: "/components/icon-select", name: "IconSelect", diff --git a/src/views/components/color-picker.vue b/src/views/components/color-picker.vue index 73db31509..ecff08b62 100644 --- a/src/views/components/color-picker.vue +++ b/src/views/components/color-picker.vue @@ -47,6 +47,9 @@ function onClick() {
+import { ref, watch } from "vue"; + +defineOptions({ + name: "DateTimePicker" +}); + +const size = ref("default"); +const dynamicSize = ref(); + +const value = ref(""); +const shortcuts = [ + { + text: "今天", + value: new Date() + }, + { + text: "昨天", + value: () => { + const date = new Date(); + date.setTime(date.getTime() - 3600 * 1000 * 24); + return date; + } + }, + { + text: "一周前", + value: () => { + const date = new Date(); + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); + return date; + } + } +]; + +const value1 = ref(""); +const datetimeFormat = ref(""); + +const value2 = ref(""); +const shortcuts1 = [ + { + text: "上周", + value: () => { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + return [start, end]; + } + }, + { + text: "上个月", + value: () => { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + return [start, end]; + } + }, + { + text: "三个月前", + value: () => { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + return [start, end]; + } + } +]; + +const value3 = ref(""); +const datePickerRef = ref(); +const placement = ref("auto"); +const checkTag = ref([ + { + title: "auto", // https://popper.js.org/docs/v2/constructors/#options + checked: false + }, + { + title: "auto-start", + checked: false + }, + { + title: "auto-end", + checked: false + }, + { + title: "top", + checked: false + }, + { + title: "top-start", + checked: false + }, + { + title: "top-end", + checked: false + }, + { + title: "bottom", + checked: false + }, + { + title: "bottom-start", + checked: false + }, + { + title: "bottom-end", + checked: false + }, + { + title: "right", + checked: false + }, + { + title: "right-start", + checked: false + }, + { + title: "right-end", + checked: false + }, + { + title: "left", + checked: false + }, + { + title: "left-start", + checked: false + }, + { + title: "left-end", + checked: false + } +]); +const curTagMap = ref({}); +function onChecked(tag, index) { + if (size.value === "disabled") return; + placement.value = tag.title; + curTagMap.value[index] = Object.assign({ + ...tag, + checked: !tag.checked + }); + checkTag.value.map(item => (item.checked = false)); + checkTag.value[index].checked = curTagMap.value[index].checked; + // 外部触发日期时间选择面板的打开与关闭 + curTagMap.value[index].checked + ? datePickerRef.value.handleOpen() + : datePickerRef.value.handleClose(); +} + +watch(size, val => + val === "disabled" + ? (dynamicSize.value = "default") + : (dynamicSize.value = size.value) +); + + + + + diff --git a/src/views/components/el-button.vue b/src/views/components/el-button.vue index 130ed0cad..d25363998 100644 --- a/src/views/components/el-button.vue +++ b/src/views/components/el-button.vue @@ -58,6 +58,9 @@ watch(size, val =>