前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载本篇技术指南围绕 Vue DevUIvue-devui组件库中的 Button 按钮组件展开系统讲解其variant形态、color主题色、size尺寸、disabled禁用、loading加载中、icon图标与shape形状等核心 API并深入剖析d-button-group按钮组的组合机制。通过阅读本文你将掌握 Button 的全部配置项、类型定义与底层实现原理并能在自己的 Vue 3 项目中直接落地使用。组件定位与使用场景Button 用于开始一个即时操作。它标记或封装一组操作命令响应用户点击行为并触发相应的业务逻辑。在 英文版文档 中该组件属于“通用General”类别在 组件入口 中被标记为title: Button 按钮、category: 通用同时导出Button与ButtonGroup两个组件。安装与引入方式本文涉及的d-button/d-button-group均为 Vue DevUI 的全局组件引入方式与库本身一致全量引入参考 快速开始安装vue-devui后在main.ts中app.use(DevUI)即可直接使用d-button按需引入参考 按需引入可手动import Button from vue-devui/button后app.use(Button)也可通过unplugin-vue-components的DevUiResolver实现自动按需注册。形态variantsolid / outline / text通过variant属性设置按钮形态目前支持三种形态形态取值说明solid实心填充按钮视觉权重最高outline描边轮廓按钮默认形态text纯文本按钮仅保留文字本身默认值为outline。基础用法示例同 shape Demotemplate div classdemo-spacing d-button variantsolidSolid Button/d-button d-buttonOutline Button/d-button d-button varianttextText Button/d-button /div /template从源码看形态对应的样式类名由 use-button.ts 中的classes计算属性生成使用 BEM 命名规范devui-button--solid、devui-button--outline、devui-button--text具体视觉差异由 button.scss 中的--solid、--outline、--text样式块定义。例如text形态下 padding 被重置为 0padding: 0而solid形态设置了min-width: 64px。主题色colorprimary / secondary / danger通过color属性设置按钮主题色支持primary、secondary、danger三种默认secondary。示例同 theme Demotemplate div classdemo-spacing d-button variantsolid colorprimaryPrimary/d-button d-button colorprimaryPrimary/d-button d-button varianttext colorprimaryPrimary/d-button /div div classdemo-spacing d-button variantsolid colorsecondarySecondary/d-button d-button colorsecondarySecondary/d-button d-button varianttext colorsecondarySecondary/d-button /div div classdemo-spacing d-button variantsolid colordangerDanger/d-button d-button colordangerDanger/d-button d-button varianttext colordangerDanger/d-button /div /template注意如果variant设置为solid则默认使用primary主题色。这一“默认色随形态变化”的机制实现在 use-button.ts 中——通过colorMap映射表决定每种形态未显式传color时的兜底值const colorMap { solid: primary, outline: secondary, text: secondary, }; const defaultColor colorMap[props.variant];随后在生成类名时使用props.color || defaultColor即显式传入的color优先级最高。测试用例 button.spec.tsx 也验证了这一点不设置color与variant时按钮呈现outline--secondary形态分别切换solid/secondary、text/primary等组合时对应devui-button--{variant}--{color}类名都会正确生成。尺寸sizesm / md / lg通过size属性设置按钮尺寸支持sm、md、lg三种默认md。示例同 size Demotemplate div classdemo-spacing d-button sizesmSmall/d-button d-buttonMedium/d-button d-button sizelgLarge/d-button /div /template尺寸差异由 button.scss 定义sm使用$devui-size-sm高度与$devui-font-size-sm字号padding 0 16px、min-width 56pxlg使用$devui-size-lg与$devui-font-size-lgpadding 0 24px、min-width 72px默认md对应$devui-size-md高度与$devui-font-size-md字号。禁用状态disabled使用disabled参数将按钮置为禁用状态。示例同 disable Demotemplate div div classdemo-spacing d-button variantsolidSolid Button/d-button d-buttonOutline Button/d-button d-button varianttextText Button/d-button /div div classdemo-spacing d-button variantsolid disabledSolid Button/d-button d-button disabledOutline Button/d-button d-button varianttext disabledText Button/d-button /div /div /template底层实现上disabled直接透传给原生button元素的disabled属性见 button.tsx原生浏览器会阻止其点击事件派发同时 button.scss 为禁用态设置了cursor: not-allowed各形态solid/outline/text在:disabled下均有对应的降级配色例如solid--secondary禁用时opacity: 0.8outline--secondary禁用时使用$devui-disabled-text、$devui-disabled-line、$devui-disabled-bg等语义变量。加载中状态loading使用loading参数将按钮置为加载中状态。示例同 loading Demotemplate d-button variantsolid :loadingshowLoading clickhandleClickClick Me/d-button /template script setup langts import { ref } from vue; const showLoading ref(false); const handleClick () { showLoading.value true; setTimeout(() { showLoading.value false; }, 2000); }; /script加载中状态有两个关键行为值得注意点击事件被拦截在 button.tsx 的onClick中若loading.value为真则直接return不会向外派发click事件。测试 button.spec.tsx 明确验证loading{true}时触发点击handleClick不会被调用样式与交互锁定加载中按钮渲染一个旋转的icon-loading图标容器类名loading-icon__container旋转动画rotating1.5s linear infinite同时 button.scss 为--is-loading状态设置了pointer-events: none从根本上屏蔽鼠标交互。loading与disabled的视觉组合均以 class 形式devui-button--is-loading由 use-button.ts 生成。此外Button 内部还注册了Loading指令来自 loading-directive.ts指令支持传入 Promise 绑定值在 Promise 执行期间自动显示加载遮罩并在finally中卸载可满足“点击后等待异步请求完成”的场景。图标按钮与形状icon / shapeicon属性用于在按钮中自定义图标传入图标名称字符串shape属性控制按钮形状round圆角 /circle圆形。示例同 icon Demotemplate div classdemo-spacing d-button iconadd variantsolidNew/d-button d-button iconfilterFilter/d-button d-button iconconnect varianttextLink/d-button d-button icondelete varianttext titleDelete/d-button d-button shaperound titleAddAdd/d-button d-button icondelete shapecircle titleDelete sizesm/d-button d-button icondelete shapecircle titleDelete/d-button d-button variantsolid iconfilter shapecircle titleAdd sizelg/d-button /div /template实现要点对应源码 button.tsx 与 use-button.ts传入icon后按钮内部渲染Icon name{icon} /图标会跟随按钮主题色着色当按钮没有默认插槽内容即纯图标按钮时会附加devui-button__icon类此时 button.scss 会收紧 padding8px / sm 4px、去掉最小宽度限制并为circle形状赋予与尺寸对应的固定宽高sm/md/lg分别对应$devui-size-sm/md/lground形状设置border-radius: 20pxcircle形状设置border-radius: 100%见 button.scss有文字内容时图标与文字之间通过clear-right-5margin-right: 5px保持间距。按钮组d-button-group多个按钮可以放入d-button-group容器组成按钮组。按钮组可通过size设置整体尺寸并与下拉菜单d-dropdown混合使用。示例同 buttonGroup Demotemplate d-button-group d-button variantsolidButton Name/d-button d-button iconicon-select-arrow variantsolid/d-button /d-button-group pSizesm/p d-button-group sizesm d-button colorprimary variantsolidShanghai/d-button d-buttonBeijing/d-button d-buttonShenzhen/d-button /d-button-group pSizedefault/p d-button-group d-button colorprimaryShanghai/d-button d-buttonBeijing/d-button d-buttonShenzhen/d-button /d-button-group pSizelg/p d-button-group sizelg d-button colorprimaryShanghai/d-button d-buttonBeijing/d-button d-buttonShenzhen/d-button /d-button-group pUse with dropdown menu/p d-button-group d-dropdown stylewidth: 100px; :positionposition alignstart d-buttonClick Me 1/d-button template #menu ul classlist-menu li classmenu-itemItem 1/li li classmenu-itemItem 2/li li classmenu-itemItem 3/li li classmenu-itemItem 4/li /ul /template /d-dropdown d-button iconadd variantsolidShanghai/d-button d-dropdown stylewidth: 100px; :positionposition alignstart d-buttonClick Me 2/d-button template #menu ul classlist-menu li classmenu-itemItem 1/li li classmenu-itemItem 2/li li classmenu-itemItem 3/li li classmenu-itemItem 4/li /ul /template /d-dropdown d-button iconfilterBeijing/d-button d-dropdown stylewidth: 100px; :positionposition alignstart d-buttonClick Me 3/d-button template #menu ul classlist-menu li classmenu-itemItem 1/li li classmenu-itemItem 2/li li classmenu-itemItem 3/li li classmenu-itemItem 4/li /ul /template /d-dropdown /d-button-group /template script setup langts import { ref } from vue; const position ref([bottom-start, top-start]); /script按钮组尺寸的传递机制是理解该组件的关键d-button-group本身仅渲染一个div容器但它通过 Vue 的provide/inject机制向子级按钮广播尺寸。源码见 button-group.tsxprovide(buttonGroupInjectionKey, { size: toRef(props, size), });子按钮在 use-button.ts 中通过inject(buttonGroupInjectionKey, null)接收const buttonGroupConf inject(buttonGroupInjectionKey, null); const buttonSize computed(() { return buttonGroupConf?.size.value || props.size; });也就是说按钮组上的size优先级高于按钮自身的size只要按钮位于d-button-group内就统一采用组级尺寸未注入时才回退到按钮自身的size。这一设计使得按钮组内的按钮天然保持尺寸一致。样式层面button-group.scss 使用display: flex排列子项并通过相邻元素的负 marginmargin-left: -1px叠加、首尾圆角归零、:hover/:active/:focus-within提升z-index等手段实现无缝衔接的组内按钮效果。参数总表Button Props与 英文版文档 保持一致参数类型默认值说明variantIButtonVariantoutline可选按钮形态colorIButtonColorsecondary可选按钮主题sizeIButtonSizemd可选按钮尺寸iconstring--可选自定义按钮图标shapeIButtonShape--可选按钮形状圆形/圆角disabledbooleanfalse可选是否禁用按钮loadingbooleanfalse可选设置加载中状态native-typeIButtonTypebutton可选按钮原生 type 属性button/submit/reset其中native-type参数在中文版文档中亦已列出见 Button 参数表对应 button-types.ts 中的IButtonType button | submit | reset最终透传到原生按钮的type属性见 button.tsx。测试用例 button.spec.tsx 验证了typesubmit时原生属性正确输出。ButtonGroup Props参数类型默认值说明sizeIButtonSizemd可选按钮组尺寸类型定义IButtonVarianttype IButtonVariant solid | outline | text;IButtonSizetype IButtonSize lg | md | sm;IButtonColortype IButtonColor primary | secondary | danger;IButtonShapetype IButtonShape circle | round;IButtonTypetype IButtonType button | submit | reset;IButtonGroupSizetype IButtonGroupSize lg | md | sm;以上类型均定义于 button-types.ts并从 组件入口 中export * from ./src/button-types对外暴露可直接在业务代码中导入使用。源码级实现原理补充1. BEM 类名体系所有类名通过 use-namespace.ts 的useNamespace(button)生成遵循devui-button块→devui-button--solid修饰→devui-button__icon元素的 BEM 规范便于样式隔离与主题定制。2. 点击水波纹反馈button.tsx 在点击时根据鼠标偏移offsetX/offsetY生成.water-wave水波纹元素配合 button.scss 的waterWave动画从 30px 扩散至 200px、透明度渐隐以及mousedown时scale(0.95)的按压效果形成完整的点击交互反馈。3. 主题变量驱动的视觉系统button.scss 全部使用 DevUI 设计令牌如--devui-btn-padding、$devui-primary、$devui-brand-active、$devui-contrast等实现配色所有 CSS 变量均带默认值兜底因此支持通过 主题定制 一键换肤而不影响按钮结构。4. 测试保障除上述点击拦截与 type 透传外button.spec.tsx 还覆盖了variant类名、size类名、icon渲染、click事件派发、disabled阻止点击、默认插槽文本渲染以及round/circle形状类名button-group.spec.tsx 验证了按钮组容器创建、默认md尺寸类名与组内按钮渲染。小结Button 是 Vue DevUI 中基础但高频的通用组件variant/color/size三个枚举属性分别控制形态、主题与尺寸disabled/loading覆盖状态场景icon与shape支持图标按钮和圆角/圆形形状d-button-group则通过provide/inject向子按钮统一广播尺寸并可与d-dropdown混排。结合 组件源码、类型定义、样式实现 与 测试用例开发者可以快速掌握其 API 全貌并据此在业务中组合出符合 DevUI 设计规范的操作按钮。赞分享前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载相关推荐Oat 按钮组件Button完全指南语义化变体、尺寸与按钮组实战Oat 按钮组件Button完全指南语义化变体、尺寸与按钮组实战 导读 本文是 Oat UI 组件库中按钮Button模块的完整技术指南。Oat 是一Semi Design Button 按钮组件完全指南类型、主题、尺寸与组合实战Semi Design Button 按钮组件完全指南类型、主题、尺寸与组合实战 Semi Design douyinfe/semi ui 的 Butt前端UI组件设计系统Shoelace 按钮组sl-button-group完全指南分组按钮的尺寸、主题、下拉与工具栏实战Shoelace 按钮组sl button group完全指南分组按钮的尺寸、主题、下拉与工具栏实战 本文围绕 Shoelace 组件库Web AwesUI组件前端上一篇OpenHuman记忆树Memory Tree深度解析AI如何在几分钟内记住你的全部资料下一篇MMagic 数据集准备指南Vimeo90K 数据集下载、预处理与 LMDB 加速构建全流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考