dm-vue3-ui/es/date-picker/panel/preset/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { Tag } from "ant-design-vue/es";
import { defineComponent, computed, ref, openBlock, createElementBlock, Fragment, renderList, createBlock, normalizeClass, unref, withCtx, createTextVNode, toDisplayString } from "vue";
import { presetValues } from "../../utils/config";
const _hoisted_1 = { class: "dm-date-picker__preset" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    customPresetValues: { default: () => [] }
  },
  emits: ["change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const quickTags = computed(() => {
      return props.customPresetValues.length ? props.customPresetValues : presetValues;
    });
    let activeTagIndex = ref(-1);
    const emit = __emit;
    const clickTag = (index) => {
      activeTagIndex.value = index;
      let tag = quickTags.value[index];
      emit("change", {
        date: [tag.startTime, tag.endTime],
        type: "preset"
      });
    };
    const setValue = (startTime, endTime) => {
      let index = quickTags.value.findIndex((item) => {
        return item.startTime == startTime && item.endTime == endTime;
      });
      activeTagIndex.value = index;
      console.log("调用preset中的方法");
    };
    __expose({ setValue });
    return (_ctx, _cache) => {
      const _component_a_tag = Tag;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(quickTags.value, (tag, index) => {
          return openBlock(), createBlock(_component_a_tag, {
            key: index,
            class: normalizeClass([{ "active-tag": unref(activeTagIndex) == index }]),
            onClick: ($event) => clickTag(index)
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(tag.label), 1)
            ]),
            _: 2
          }, 1032, ["class", "onClick"]);
        }), 128))
      ]);
    };
  }
});
export {
  _sfc_main as default
};