noob-components/packages/base/item/datetime.vue

<template>
  <el-date-picker
    :size="state.size.size"
    :class="['form-item', full && 'full']"
    :value-format="formater"
    v-model="myValue"
    :type="type"
    :placeholder="placeholder || t('rule.pleaseEnter')"
    :disabled="disabled"
    :clearable="clearable"
    :teleported="false"
  />
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onMounted, ref, watch } from "vue";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();
const { state } = useStore();

const prop = defineProps({
  modelValue: null,
  placeholder: {
    type: String,
    default: null,
  },
  type: {
    type: String,
    default: "datetime",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  full: {
    type: Boolean,
    default: false,
  },
  formater: {
    type: String,
    default: "YYYY-MM-DD HH:mm:ss",
  },
  width: {
    type: Number,
  },
});
const emit = defineEmits(["update:modelValue"]);
const myValue = ref(null);
const width = ref("150px");
const setWidth = () => {
  if (prop.width) {
    width.value = prop.width + "px";
  } else {
    width.value = state.size.searchWidth;
  }
};
watch(
  () => state.size,
  (n, o) => {
    setWidth();
  }
);
watch(myValue, (n, o) => {
  emit("update:modelValue", n);
});
watch(
  () => prop.modelValue,
  (n, o) => {
    myValue.value = n;
  }
);
onMounted(() => {
  prop.modelValue && (myValue.value = prop.modelValue);
  setWidth();
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.form-item {
  width: v-bind("width");

  &.full {
    width: 100%;
  }
}
</style>