vue element plus Button 按钮

简介: vue element plus Button 按钮

常用的操作按钮。

基础用法#

使用 typeplainroundcircle 来定义按钮的样式。

DefaultPrimarySuccessInfoWarningDanger

PlainPrimarySuccessInfoWarningDanger

RoundPrimarySuccessInfoWarningDanger

禁用状态#

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。

DefaultPrimarySuccessInfoWarningDanger

PlainPrimarySuccessInfoWarningDanger

链接按钮#

WARNING

type="text" 已被 废弃,将于版本 3.0.0 时 移除,请考虑切换至新的 API。

新的 API link 于 2.2.1 版本时添加,你可以使用 type API 设置链接按钮的主题样式

Basic link button

plainprimarysuccessinfowarningdanger

Disabled link button

plainprimarysuccessinfowarningdanger

文字按钮#

TIP

文字按钮在现在有了全新的设计样式。 2.2.0 如果您想要使用老版样式的按钮,可以考虑使用 Link 组件。

API也已更新,由于 type 属性会同时控制按钮的样式, 因此我们通过一个新的 API text: boolean 来控制文字按钮。

没有边框和背景色的按钮。

Basic text button

plainprimarysuccessinfowarningdanger

Background color always on

plainprimarysuccessinfowarningdanger

Disabled text button

plainprimarysuccessinfowarningdanger

图标按钮#

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加<i>标签来添加图标, 你也可以使用自定义图标。

SearchUpload

按钮组#

以按钮组的方式出现,常用于多项类似操作。

使用 <el-button-group> 对多个按钮分组。

Previous PageNext Page

加载状态按钮#

点击按钮来加载数据,并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

TIP

您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标

ps: loading 插槽优先级高于loadingIcon属性

LoadingLoading

Loading

调整尺寸#

除了默认的大小,按钮组件还提供了几种额外的尺寸可供选择,以便适配不同的场景。

使用 size 属性额外配置尺寸,可使用 largesmall两种值。

LargeDefaultSmallSearchSearchSearch

LargeDefaultSmallSearchSearchSearch

Tag2.3.4#

您可以自定义元素标签。例如,按钮,div,路由链接,nuxt链接。

button

div

a

自定义颜色beta#

您可以自定义按钮的颜色。

我们将自动计算按钮处于 hover 和 active 状态时的颜色。

DefaultPlainDisabledDisabled Plain

Button API#

Button Attributes#

属性名 说明 类型 默认值
size 尺寸 enum
type 类型 enum
plain 是否为朴素按钮 boolean false
text 2.2.0 是否为文字按钮 boolean false
bg 2.2.0 是否显示文字按钮背景颜色 boolean false
link 2.2.1 是否为链接按钮 boolean false
round 是否为圆角按钮 boolean false
circle 是否为圆形按钮 boolean false
loading 是否为加载中状态 boolean false
loading-icon 自定义加载中状态图标组件 string / Component Loading
disabled 按钮是否为禁用状态 boolean false
icon 图标组件 string / Component
autofocus 原生 autofocus 属性 boolean false
native-type 原生 type 属性 enum button
auto-insert-space 自动在两个中文字符之间插入空格 boolean
color 自定义按钮颜色, 并自动计算 hoveractive 触发后的颜色 string
dark dark 模式, 意味着自动设置 color 为 dark 模式的颜色 boolean false
tag 2.3.4 自定义元素标签 string / Component button

Button Slots#

插槽名 说明
default 自定义默认内容
loading 自定义加载中组件
icon 自定义图标组件

Button Exposes#

属性名 说明 类型
ref 按钮 html 元素 object
size 按钮尺寸 object
type 按钮类型 object
disabled 按钮已禁用 object
shouldAddSpace 是否在两个字符之间插入空格 object

ButtonGroup API#

ButtonGroup Attributes#

插槽名 说明 类型 默认值
size 用于控制该按钮组内按钮的大小 enum
type 用于控制该按钮组内按钮的类型 enum

ButtonGroup Slots#

插槽名 说明 子标签
default 自定义按钮组内容 Button

源代码#

组件文档

相关文章
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
11天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发