@94ai-plus/nf-button

Vue 3 原生按钮，保留旧 common-ui 的 props、click、default 插槽及 mini/small/medium 尺寸。

HomePage

官网 · 项目仓库 · 按钮文档

Installation

yarn add @94ai-plus/nf-button @94ai-plus/nf-theme-chalk vue element-plus

Usage

import NfButton from '@94ai-plus/nf-button'
import '@94ai-plus/nf-theme-chalk/nf-button.css'

app.use(NfButton)

<template>
  <NfButton type="primary" size="medium" @click="submit">提交</NfButton>
  <NfButton :loading="true">加载中</NfButton>
</template>

submit 为业务自身的事件处理方法。NfConfigProvider 的 :nf-button="{ size: 'medium', type: 'primary' }" 可配置所有按钮 props；支持响应式更新和嵌套继承，按钮显式属性优先于最近 Provider、外层 Provider 和组件原有默认值。undefined 继续继承，false、0 和空字符串保留；对象、数组和函数整体替换，不深度合并。按钮沿用 mini / small / medium 尺寸，不受 Element Plus 顶层 size 控制。详见全局配置文档。

全量 @94ai-plus/common-ui 已注册并具名导出 NfButton；CommonUIResolver 支持自动导入。OEM 使用 @94ai-plus/nf-theme-oem/nf-button.css 并设置主题为 oem。

icon 可为自定义 CSS 类名或 Vue 图标组件，内置适配文档常用的旧 el-icon 类名；其他旧字体图标需要调用方的样式或换用 SVG 组件。loading 使用内置 SVG，无 Element UI 或 Vue 2 依赖。

包提供 ESM、CommonJS、browser ES / UMD 和 TypeScript 声明；独立样式也可从 @94ai-plus/nf-button/style.css 引入。完整 API、差异和交互示例见上方按钮文档。

Contributors

感谢每一位参与项目建设的贡献者！

以上为随本版本发布的贡献者统计快照，统计日期与分支见图中说明；仅统计 Git 非合并提交，头像使用姓名首字母，不是 GitLab 个人照片。

License

本项目采用 MIT License 开源许可。

Copyright (c) 2026-present Jiahe Zou, 94 Intelligent Technology Co., Ltd.