ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

feat: export configContentInject and formatToken

Open wzc520pyfm opened this issue 5 months ago • 0 comments
trafficstars

我在基于antdv封装上层组件时,遇到如下两个问题:

  1. 我无法获取到useConfigContextInject,除非使用esm导入:
import { useConfigContextInject } from 'ant-design-vue/es/config-provider/context';
const { getPrefixCls, direction, csp, iconPrefixCls, theme } = useConfigContextInject();

他在esm下工作良好,但当打包umd使用cdn导入时,全局变量antd并没有暴露useConfigContextInject,我未寻找到其他获取useConfigContextInject的方式,因此希望可以antdv可以对外暴露useConfigContextInject。我尝试的暴露方式是通过ConfigProvider组件:

const { getPrefixCls, direction, csp, iconPrefixCls, theme } = ConfigProvider.useConfigContextInject();

该api暴露方式和antd基本一致: image

  1. 当在外部基于Derivative (designer) Token 生成 Alias (developer) Token时,需要借助antdv内部的formatToken方法,此方法涉及内容较多,大量拷贝至外部应该不是很好的方式,它同样可以在esm下导入,但umd下需要antdv对外暴露:
import formatToken from 'ant-design-vue/es/theme/util/alias';

formatToken应该可以作为theme的工具方法,和useToken一起暴露给外部 (components/theme/index.ts):

import formatToken from './util/alias';

export default {
  useToken,
+  formatToken,
  defaultAlgorithm,
  darkAlgorithm,
  compactAlgorithm,
};

Use:

import { theme } from 'ant-design-vue';
const AliasToken = theme.formatToken(DerivativeToken);

wzc520pyfm avatar May 24 '25 10:05 wzc520pyfm