54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<div class="form-item-box" :style="{ width: width }">
|
|
<el-date-picker
|
|
style="width:100%"
|
|
v-model="localModelValue"
|
|
:type="props.type"
|
|
v-bind="$attrs"
|
|
@change="onInput"
|
|
:placeholder="placeholder"
|
|
:value-format="props.format"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { COMPONENT_WIDTH } from "@/constant";
|
|
import { ref, defineProps, defineEmits, defineExpose, computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
//获取组件传值
|
|
placeholder: {
|
|
default: "请填写",
|
|
type: String
|
|
},
|
|
format:{
|
|
default: "YYYY-MM-DD",
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
default: "",
|
|
type: String
|
|
},
|
|
width: {
|
|
default: COMPONENT_WIDTH,
|
|
type: String
|
|
},
|
|
type: {
|
|
default: "date",
|
|
type: String
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
|
|
// 使用计算属性处理双向绑定
|
|
const localModelValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emits("update:modelValue", value)
|
|
});
|
|
|
|
const onInput = (e) => {
|
|
emits("update:modelValue", e);
|
|
};
|
|
</script> |