@qin-ui/antd-vue-pro/es/component-provider/index.js

二次封装antd vue组件

import { inject, provide, defineComponent, renderSlot } from "vue";
const INJECT_KEYS = {
  "pro-table": Symbol(""),
  "pro-form": Symbol(""),
  "pro-form-item": Symbol(""),
  // field
  "input": Symbol(""),
  "textarea": Symbol(""),
  "input-password": Symbol(""),
  "input-search": Symbol(""),
  "input-number": Symbol(""),
  "select": Symbol(""),
  "cascader": Symbol(""),
  "date-picker": Symbol(""),
  "date-picker.date": Symbol(""),
  "date-picker.week": Symbol(""),
  "date-picker.month": Symbol(""),
  "date-picker.year": Symbol(""),
  "date-picker.quarter": Symbol(""),
  "range-picker": Symbol(""),
  "time-picker": Symbol(""),
  "checkbox-group": Symbol(""),
  "radio-group": Symbol(""),
  "switch": Symbol(""),
  "slider": Symbol(""),
  "tree-select": Symbol(""),
  "transfer": Symbol("")
};
const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
const INIT_PROPS_MAP = /* @__PURE__ */ new Map([
  [INJECT_KEYS["pro-table"], {}],
  [INJECT_KEYS["pro-form"], {}],
  [INJECT_KEYS["pro-form-item"], {}],
  // field
  [INJECT_KEYS["input"], { maxlength: 100, allowClear: true, placeholder: "请输入" }],
  [INJECT_KEYS["textarea"], { maxlength: 200, autoSize: { minRows: 3, maxRows: 6 }, showCount: true, allowClear: true, placeholder: "请输入" }],
  [INJECT_KEYS["input-password"], { maxlength: 100, allowClear: true, placeholder: "请输入" }],
  [INJECT_KEYS["input-number"], { max: 10 ** 15 - 1, min: -(10 ** 15 + 1), controls: false, allowClear: true, placeholder: "请输入" }],
  [INJECT_KEYS["select"], { allowClear: true, placeholder: "请选择", getPopupContainer }],
  [INJECT_KEYS["cascader"], { allowClear: true, placeholder: "请选择", getPopupContainer }],
  [INJECT_KEYS["date-picker"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["date-picker.week"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["date-picker.month"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["date-picker.year"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["date-picker.quarter"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["time-picker"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["range-picker"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["checkbox-group"], { allowClear: true, getPopupContainer }],
  [INJECT_KEYS["radio-group"], {}],
  [INJECT_KEYS["switch"], {}],
  [INJECT_KEYS["slider"], {}],
  [INJECT_KEYS["tree-select"], {}],
  [INJECT_KEYS["transfer"], {}]
]);
const useInjectProps = (key) => {
  const initProps = INIT_PROPS_MAP.get(key) ?? {};
  const injectProps = inject(key, {});
  return { ...initProps, ...injectProps };
};
const useProviderProps = (key, value) => {
  provide(key, value);
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    componentVars: {}
  },
  setup(__props) {
    const props = __props;
    if (props.componentVars) {
      Object.entries(props.componentVars).forEach(([key, val]) => {
        const injectKey = INJECT_KEYS[key];
        useProviderProps(injectKey, val);
      });
    }
    return (_ctx, _cache) => {
      return renderSlot(_ctx.$slots, "default");
    };
  }
});
export {
  INIT_PROPS_MAP,
  INJECT_KEYS,
  _sfc_main as default,
  useInjectProps,
  useProviderProps
};