cione-comp-lib/es/packages/co-date-pickers/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle } from "vue";
import "./js/xndatepicker.mjs";
import { XNDatepicker } from "./js/xndatepicker2.mjs";
import { handleComponetEvent, handlePushEvent } from "../tools.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoDatePickers",
  props: {
    dataKey: {
      type: String,
      required: true
    },
    dataType: {
      type: String,
      default: "month"
    },
    fontSize: { type: Number },
    fontFamily: { type: String },
    color: { type: String },
    borderColor: { type: String },
    borderRadius: { type: Number },
    bgColor: { type: String },
    startTime: { type: String }
  },
  setup(props) {
    const timeDateRef = ref();
    const monthDom = ref();
    const valueDom = ref();
    const formatValue = ref("YYYY-MM");
    const timeObj = ref();
    const typeInit = () => {
      if (props.dataType === "year") {
        formatValue.value = "YYYY";
      } else if (props.dataType === "month") {
        formatValue.value = "YYYY-MM";
      } else if (props.dataType === "date") {
        formatValue.value = "YYYY-MM-DD HH:mm:ss";
      } else if (props.dataType === "multiple") {
        formatValue.value = "YYYY-MM-DD HH:mm:ss";
      } else if (props.dataType === "daterange") {
        formatValue.value = "YYYY-MM-DD";
      }
    };
    const mouthFn = (startTime) => {
      typeInit();
      timeObj.value = new XNDatepicker(
        monthDom.value,
        valueDom.value,
        {
          format: formatValue.value,
          type: props.dataType,
          multipleDates: [],
          startTime,
          maxDate: "",
          separator: " \u5230 ",
          showType: "modal",
          linkPanels: false,
          showClear: true,
          autoConfirm: true,
          showShortKeys: true,
          autoFillDate: true
        },
        function(data) {
          handleComponetEvent(props.dataKey, "click", data.startTime);
          handlePushEvent({
            key: "CoDatePickers",
            elementId: props.dataKey,
            event: "click",
            data: data.startTime
          });
        },
        function(data) {
        }
      );
    };
    const updataStartTime = (startTime) => {
      var _a;
      (_a = document.querySelector(`#${timeObj.value.id}`)) == null ? void 0 : _a.remove();
      mouthFn(startTime);
    };
    watch(
      () => props.dataType,
      () => {
        mouthFn("");
      }
    );
    onMounted(() => {
      mouthFn("");
    });
    return {
      timeDateRef,
      monthDom,
      valueDom,
      updataStartTime,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = {
  class: "co-time-date test",
  ref: "timeDateRef",
  type: "text",
  style: { width: "100%", height: "100%" }
};
const _hoisted_2 = { class: "flex-div" };
const _hoisted_3 = { ref: "valueDom" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", _hoisted_2, [
      createElementVNode("div", {
        id: "month",
        class: "dateinputer",
        ref: "monthDom",
        style: normalizeStyle({
          fontSize: _ctx.fontSize + "px",
          fontFamily: _ctx.fontFamily,
          color: _ctx.color,
          border: `1px solid ${_ctx.borderColor}`,
          borderRadius: _ctx.borderRadius + "px",
          backgroundColor: _ctx.bgColor
        })
      }, [
        createElementVNode("span", _hoisted_3, "\u8BF7\u9009\u62E9", 512)
      ], 4)
    ])
  ], 512);
}
var CoDatePickers = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-202abb5a"]]);
export { CoDatePickers as default };