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

View File

@ -227,15 +227,15 @@ export default {
<template> <template>
<div style="display:flex; align-items: center;margin-bottom: 5px;"> <div style="display:flex; align-items: center;margin-bottom: 5px;">
<lay-date-picker v-model="rangeTime1" range placeholder="type : date"></lay-date-picker> <lay-date-picker v-model="rangeTime1" range :placeholder="['开始日期','结束日期']"></lay-date-picker>
<span style="margin-left:10px">modelValue:{{rangeTime1}}</span> <span style="margin-left:10px">modelValue:{{rangeTime1}}</span>
</div> </div>
<div style="display:flex; align-items: center;margin-bottom: 5px;"> <div style="display:flex; align-items: center;margin-bottom: 5px;">
<lay-date-picker v-model="rangeTime2" range type="datetime" placeholder="type : datetime"></lay-date-picker> <lay-date-picker v-model="rangeTime2" range type="datetime" :placeholder="['开始日期','结束日期']"></lay-date-picker>
<span style="margin-left:10px">modelValue:{{rangeTime2}}</span> <span style="margin-left:10px">modelValue:{{rangeTime2}}</span>
</div> </div>
<div style="display:flex; align-items: center;margin-bottom: 5px;"> <div style="display:flex; align-items: center;margin-bottom: 5px;">
<lay-date-picker v-model="rangeTime3" range type="yearmonth" placeholder="type : datetime"></lay-date-picker> <lay-date-picker v-model="rangeTime3" range type="yearmonth" :placeholder="['开始日期','结束日期']"></lay-date-picker>
<span style="margin-left:10px">modelValue:{{rangeTime3}}</span> <span style="margin-left:10px">modelValue:{{rangeTime3}}</span>
</div> </div>
</template> </template>