字典功能

组件路径

字典组件路径src/components/DictTag/src/index.vue 配置路径在同路径下的 data.ts

修改默认颜色

在 data.ts 修改即可, 由于官方使用element-plus使用的也是 element 的属性 适配需要做element to antd, 下面为自定义

export const tagTypes: TagType = {
  /** 由于和elementUI不同 用于替换颜色 */
  default: { label: "默认(default)", color: "default" },
  primary: { label: "主要(primary)", color: "processing" },
  success: { label: "成功(success)", color: "success" },
  info: { label: "信息(info)", color: "default" },
  warning: { label: "警告(warning)", color: "warning" },
  danger: { label: "危险(danger)", color: "red" },
  /** 自定义预设 color可以为16进制颜色 */
  pink: { label: "pink", color: "pink" },
  red: { label: "red", color: "red" },
  orange: { label: "orange", color: "orange" },
  green: { label: "green", color: "green" },
  cyan: { label: "cyan", color: "cyan" },
  purple: { label: "purple", color: "purple" },
};

获取字典 option

主要用于下拉框/表格tag使用

路径src/utils/dict.ts

表单 schema 使用

export const modalSchemas: FormSchema[] = [
  {
    field: "configType",
    label: "系统内置",
    component: "RadioButtonGroup",
    defaultValue: "Y",
    componentProps: {
      options: getDictOptions(DictEnum.YES_NO),
    },
  },
];

表格 column 使用

import { useRender } from "/@/hooks/component/useRender";
import { getDictOptions } from "@/utils/dict";
import { DictEnum } from "/@/enums/dictEnum";

export const { renderDict } = useRender();
export const columns: BasicColumn[] = [
  {
    title: "系统内置",
    dataIndex: "configType",
    width: 120,
    customRender({ value }) {
      return renderDict(value, DictEnum.YES_NO);
    },
  },
];

字典的 css 注意事项

需要全局存在该类名才行 按道理unocss应该支持动态类名 但是确实要引入了才会正常显示

可参考src/views/system/dict/data/unocss.vue