全局 API

useTheme

主题相关的组合式函数，用于处理主题配置和变量解析。

导入

import { useTheme } from '@/components/theme/ThemeDefine';

返回值

theme

当前的主题配置对象。

resolveThemeSize(inValue?: string|number, defaultValue?: string|number) : string|undefined

解析主题尺寸值，支持从主题配置中获取尺寸定义。

参数	说明	类型	必填	默认值
inValue	输入的尺寸值	string | number	否	-
defaultValue	默认尺寸值	string | number	否	-

返回值：解析后的尺寸字符串，如果无法解析则返回undefined。

resolveThemeColor(inValue?: string, defaultValue?: string) : string|undefined

解析主题颜色值，支持从主题配置中获取颜色定义。

参数	说明	类型	必填	默认值
inValue	输入的颜色值	string	否	-
defaultValue	默认颜色值	string	否	-

返回值：解析后的颜色字符串，如果无法解析则返回undefined。

resolveThemeSizes<T>(defaults: T)

批量解析主题尺寸值。

参数	说明	类型	必填	默认值
defaults	默认尺寸配置对象	T	是	-

返回值：解析后的尺寸配置对象。

resolveThemeColors<T>(defaults: T)

批量解析主题颜色值。

参数	说明	类型	必填	默认值
defaults	默认颜色配置对象	T	是	-

返回值：解析后的颜色配置对象。

getColor(key: string, defaultValue?: string)

获取主题颜色配置。

参数	说明	类型	必填	默认值
key	颜色键名，支持 type.key 格式	string	是	-
defaultValue	默认颜色值	string	否	-

返回值：颜色值或默认值。

getSize(key: string, defaultValue?: string|number)

获取主题尺寸配置。

参数	说明	类型	必填	默认值
key	尺寸键名，支持 type.key 格式	string	是	-
defaultValue	默认尺寸值	string | number	否	-

返回值：解析后的尺寸值或默认值。

getText(key: string, defaultValue: Record<string, string>)

获取主题文本配置。

参数	说明	类型	必填	默认值
key	文本配置键名	string	是	-
defaultValue	默认文本配置	Record<string, string>	是	-

返回值：文本配置对象。

getVar<T>(key: string, defaultValue: T) : T

获取主题变量值。

参数	说明	类型	必填	默认值
key	变量键名	string	是	-
defaultValue	默认变量值	T	是	-

返回值：变量值或默认值。

getVars<T extends Record<string, string|number|boolean>>(defaults: T)

批量获取主题变量值。

参数	说明	类型	必填	默认值
defaults	默认变量配置对象	T	是	-

返回值：变量配置对象。

getColors<T extends Record<string, string|undefined>>(defaults: T)

批量获取主题颜色值。

参数	说明	类型	必填	默认值
defaults	默认颜色配置对象	T	是	-

返回值：颜色配置对象。

useThemeStyle(style: Record<string, any>)

创建响应式的主题样式对象。

参数	说明	类型	必填	默认值
style	样式对象，支持动态主题变量	Record<string, any>	是	-

返回值：计算属性，包含解析后的样式对象。

useThemeStyles<T extends Record<string, Record<string, any>>>(style: Record<string, Record<string, any>>)

批量创建响应式的主题样式对象。

参数	说明	类型	必填	默认值
style	多个样式对象的集合	Record<string, Record<string, any>>	是	-

返回值：计算属性集合，包含多个解析后的样式对象。

示例

const themeContext = useTheme();

// 解析尺寸
const size = computed(() => themeContext resolveThemeSize('small', 16));
// 解析颜色
const color = computed(() => themeContext.resolveThemeColor('primary', '#1989fa'));

// 创建响应式样式
const myStyle = themeContext.useThemeStyle({
  color: DynamicColor('primary'),
  fontSize: DynamicSize('fontSize.small'),
});

configTheme

配置主题变量，建议在App.vue中调用。

导入

import { configTheme } from '@/components/theme/ThemeDefine'

函数签名

function configTheme(cb: (defaultTheme: ThemeConfig) => ThemeConfig)

参数

参数	说明	类型	必填	默认值
cb	回调函数，参数为默认主题配置，返回值为新的主题配置	(defaultTheme: ThemeConfig) => ThemeConfig	是	-

示例

configTheme((defaultTheme) => {
  return {
    ...defaultTheme,
    colorConfigs: {
      ...defaultTheme.colorConfigs,
      default: {
        ...defaultTheme.colorConfigs.default,
        primary: '#ff6700',
        success: '#52c41a'
      }
    }
  };
});

configDefaultSizeUnit

配置默认的尺寸单位。

导入

import { configDefaultSizeUnit } from '@/components/theme/ThemeDefine'

函数签名

function configDefaultSizeUnit(unit: string)

参数

参数	说明	类型	必填	默认值
unit	尺寸单位，如 'px'、'rpx' 等	string	是	-

示例

// 设置默认尺寸单位为 rpx
configDefaultSizeUnit('rpx');

configIconMap

设置 Icon 组件的图标名称映射。

导入

import IconUtils from '@/components/basic/IconUtils'

函数签名

function configIconMap(map: Record<string, string>)

参数

参数	说明	类型	必填	默认值
map	图标映射对象，key是图标的名字，value可以是多种格式	Record<string, string>	是	-

说明

value 可以是以下几种情况：

• 是一个 iconfont:name 字符，则会渲染为字体形式的图标，通过 : 分割，前面是字体名称，后面是图标名称
• 是一个 data:*** 或者 http/https URL，则会尝试使用 Image 渲染为图片
• 是一个 <svg 开头的字符串，会渲染为 svg
• 否则，作为默认字体 iconfont 渲染为字体形式的图标

示例

IconUtils.configIconMap({
  // 字体图标
  'search': 'iconfont:search',
  'home': 'my-icons:home',
  
  // 图片图标
  'logo': 'https://example.com/logo.png',
  
  // SVG图标
  'arrow-right': '<svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg>'
});