(component): 新增 date-picker 组件 placeholder 属性 string[] 类型支持

This commit is contained in:
就眠儀式
2022-10-25 21:10:12 +08:00
parent d3e16e285c
commit 74200d7e92
2 changed files with 22 additions and 5 deletions

View File

@@ -14,7 +14,7 @@
<lay-input
:name="name"
:readonly="readonly"
:placeholder="placeholder"
:placeholder="startPlaceholder"
:prefix-icon="prefixIcon"
:suffix-icon="suffixIcon"
:disabled="disabled"
@@ -34,6 +34,7 @@
:readonly="readonly"
:name="name"
v-model="dateValue[0]"
:placeholder="startPlaceholder"
:disabled="disabled"
@change="onChange"
class="start-input"
@@ -45,6 +46,7 @@
:readonly="readonly"
:name="name"
:allow-clear="disabled && allowClear"
:placeholder="endPlaceholder"
v-model="dateValue[1]"
:disabled="disabled"
@change="onChange"
@@ -126,10 +128,11 @@ import YearPanel from "./components/YearPanel.vue";
import MonthPanel from "./components/MonthPanel.vue";
import DateRange from "./components/DateRange.vue";
import MonthRange from "./components/MonthRange.vue";
import { computed } from "@vue/reactivity";
export interface DatePickerProps {
type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
placeholder?: string;
placeholder?: string | string[];
modelValue?: string | number | string[];
disabled?: boolean;
simple?: boolean;
@@ -163,6 +166,20 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
timestamp: false,
});
const startPlaceholder = computed(() => {
if(Array.isArray(props.placeholder)) {
return props.placeholder[0];
}
return props.placeholder;
});
const endPlaceholder = computed(() => {
if(Array.isArray(props.placeholder)) {
return props.placeholder[1];
}
return props.placeholder;
});
const dropdownRef = ref(null);
const $emits = defineEmits(["update:modelValue"]);
const hms = ref({