项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

组合式函数 ​

与组件配套的组合式函数(Composables),均从包根导出。通用逻辑不再需要复制粘贴:

js
import { useClipboard, useDarkMode, usePermission } from '@wil-works/evoke-business-ui'

useClipboard — 剪贴板 ​

copy(text) 返回 Promise,copied 为 300ms 复位成功标记,可直接驱动按钮反馈:

useDarkMode — 暗色模式 ​

读写 html.dark,全库令牌即时切换;配合 主题定制 使用:

useFullscreen — 全屏 ​

控制整个页面或指定元素进入全屏。注意:进入全屏的元素必须自带背景色,否则会透出浏览器全屏态的黑底:

看板面板(点击按钮进入全屏演示)

usePermission — 权限判定 ​

has('user:delete') / hasAny([...]) / hasAll([...]);权限来源为 ConfigProvider 的 permissions 或 setPermissions() 全局码表:

order:delete:无权限view+export:不满足

全部清单 ​

函数返回说明
useClipboard{ copied, copy }剪贴板复制
useDarkMode{ isDark, toggleDark, setDark }暗色模式
useFullscreen{ isFullscreen, enter, exit, toggle }全屏控制
usePermission{ permissions, has, hasAny, hasAll }权限判定
useTable表格状态与动作分页/排序/筛选/加载,见 企业级实践
useZIndex{ zIndex, next, current }弹层层级递增
useClickOutside(el, handler)点击外部检测
useFocusTrap焦点圈定Dialog/Drawer 内部使用
useLockScroll锁定滚动弹层打开时防滚动穿透
useFloating定位引擎floating-ui 封装,Popper 家族基座
useTeleport挂载点解析to 属性容错
useSafeArea{ top, bottom, left, right }全面屏安全区 insets(响应式),见 移动端适配
ensureViewportFit补写 meta页面 viewport 缺 viewport-fit=cover 时自动补上(缺失时 env() 恒为 0)
useFormItem{ form, formItem, size, disabled }表单契约(输入类组件内部)
useConfigProvider{ size, locale, namespace, platform }全局配置消费
useLocale / usePlatform语言包 / 平台形态国际化与移动端适配