Common 公共工具

re 组件库公共工具模块，提供类型定义、样式拼接、单位处理和唯一 ID 等基础能力

re 组件库公共工具模块，提供类型定义、样式拼接、单位处理和唯一 ID 等基础能力。

演示

9:41

代码示例

<!-- 组件容器 -->
  <re-common class="demo-default demo-shell"> <text class="demo-shell__title">ReCommon Root</text> <text class="demo-shell__desc">默认实例可作为无侵入容器承载 slot，并保持统一 class/style 接口。</text> </re-common>

<!-- 自定义样式 -->
  <re-common class="demo-custom-style demo-shell" customStyle="padding: 12px; background-color: #f8fafc; border-radius: 10px; border-width: 1px; border-style: solid; border-color: #dbe7ff;"> <text class="demo-shell__title">样式透传</text> <text class="demo-shell__desc">通过 customStyle 可以直接控制承载容器，不影响内部工具函数导出。</text> </re-common>

<!-- 多个实例 -->
  <re-common class="demo-multi-1 demo-multi-card" customStyle="padding: 10px; background-color: #f8fafc; border-radius: 8px; margin-bottom: 8px;"> <text class="demo-multi-card__text">实例一：适合作为基础工具宿主。</text> </re-common>
  <re-common class="demo-multi-2 demo-multi-card" customStyle="padding: 10px; background-color: #fff7ed; border-radius: 8px; margin-bottom: 8px;"> <text class="demo-multi-card__text">实例二：每个实例都保持轻量，不引入额外主题状态。</text> </re-common>
  <re-common class="demo-multi-3 demo-multi-card" customStyle="padding: 10px; background-color: #eefbf3; border-radius: 8px;"> <text class="demo-multi-card__text">实例三：可与其他基础模块自由组合。</text> </re-common>

引入

re-common 既可以作为基础容器组件使用，也可以直接从 utssdk / type.uts 中引入工具函数、类型定义。

如需使用组件：

import ReCommon from '@/uni_modules/reglow-review/components/re-common/re-common'

如需使用工具函数：

import { addUnit, clamp, getUniqueId, styles, toFixed, toKebabCase } from '@/uni_modules/reglow-review/utssdk/re-common/interface.uts'
import type { RePlacement, ReShape, ReSize, ReTheme, ReVariant } from '@/uni_modules/reglow-review/components/re-common/type.uts'

工具函数

名称	返回	说明
`addUnit(value)`	`string`	将数字补全为 `px` 字符串
`styles(styleObj)`	`string`	把样式对象转成内联样式字符串
`toKebabCase(str)`	`string`	把驼峰命名转成短横线命名
`getUniqueId(prefix)`	`string`	生成递增唯一 ID
`clamp(value, min, max)`	`number`	将数值限制在指定区间
`toFixed(value, digits)`	`string`	格式化数字精度

示例片段

样式对象转字符串

import { styles } from '@/uni_modules/reglow-review/utssdk/re-common/interface.uts'

const inlineStyle = styles({
  paddingTop: 12,
  backgroundColor: '#f8fafc',
  borderRadius: '8px'
} as UTSJSONObject)

统一处理尺寸与边界

import { addUnit, clamp } from '@/uni_modules/reglow-review/utssdk/re-common/interface.uts'

const safeWidth = addUnit(clamp(320, 240, 400))

类型复用

import type { ReSize, ReTheme } from '@/uni_modules/reglow-review/components/re-common/type.uts'

const size: ReSize = 'medium'
const theme: ReTheme = 'primary'

类型定义

名称	类型
`ReSize`	`small \| medium \| large`
`ReTheme`	`default \| primary \| danger \| warning \| success`
`ReShape`	`rectangle \| round \| square \| circle`
`ReVariant`	`base \| outline \| text \| dashed`
`RePlacement`	`top \| bottom \| left \| right`

API

Common Props

名称	类型	默认值	描述	必传
customStyle	`string`	""	自定义样式	N
customClass	`string`	""	自定义类名	N

Common Slots

名称	描述
default	默认插槽，用于承载任意业务内容

AI 能力（MCP / Skills）

ReView 提供 MCP 服务器与 Skills 知识包，让 AI 助手查询组件文档、uvue 示例与源码，并按团队规范产出代码。

ConfigProvider 全局配置

统一管理局部主题、国际化文案和弹层层级，是整个组件体系的配置入口。

内容锚点

演示
代码示例
引入
工具函数
示例片段
类型定义
API
- Common Props
- Common Slots