sgxt_web/src/components/MyComponents/Date/index.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>