✨(component): 新增 date-picker 组件 placeholder 属性 string[] 类型支持
This commit is contained in:
parent
d3e16e285c
commit
74200d7e92
@ -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({
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user