birdpaper-ui/es/datePicker/src/datePicker.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { defineComponent, ref, computed, provide, watch } from "vue";
import _sfc_main$1 from "./pickerPanel.vue.js";
import { IconCalendarLine } from "birdpaper-icon";
import { dateInjectionKey } from "./types.js";
import dayjs from "dayjs";
const _sfc_main = defineComponent({
  name: "DatePicker",
  props: {
    /** 绑定值 Binding value */
    modelValue: { type: String, default: "" },
    /** 输入框尺寸 Size of the input */
    size: { type: String, default: "normal" },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 是否只读状态 Readonly or not */
    readonly: { type: Boolean, default: true },
    /** 是否警示状态 Danger or not */
    isDanger: { type: Boolean, default: false },
    /** 占位提示文字 The placeholder text */
    placeholder: { type: String, default: "" },
    /** 是否允许清空 Clearable or not */
    clearable: { type: Boolean, default: false },
    /** 语言包 */
    langs: { type: String, default: "zh-cn" },
    /** 值格式 */
    valueFormat: { type: String },
    /** 隐藏触发器 */
    hideTrigger: { type: Boolean, default: false },
    /** 是否显示时间选择器 */
    showTime: { type: Boolean, default: false }
  },
  components: { pickerPanel: _sfc_main$1, IconCalendarLine },
  emits: ["update:modelValue", "input", "blur"],
  setup(props, { emit }) {
    const name = "bp-date-picker";
    const inputRef = ref();
    const showPopup = ref(false);
    const global_value = ref(props.modelValue || "");
    const defaultFormatComputed = computed(() => {
      return props.valueFormat ? props.valueFormat : props.showTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
    });
    provide(dateInjectionKey, {
      modelValue: global_value,
      langs: props.langs,
      valueFormat: props.valueFormat,
      showTime: props.showTime,
      onSelect: (v, payload, closePopup = true) => {
        global_value.value = v;
        if (closePopup)
          showPopup.value = false;
        emit("update:modelValue", dayjs(global_value.value).format(defaultFormatComputed.value));
      }
    });
    const onInput = () => emit("input");
    const onBlur = () => emit("blur");
    watch(
      () => props.modelValue,
      (value) => {
        global_value.value = value || "";
      }
    );
    return {
      name,
      inputRef,
      global_value,
      showPopup,
      onInput,
      onBlur
    };
  }
});
export {
  _sfc_main as default
};