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

源代码#

组件文档

相关文章
|
4天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
4天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
10天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
14 2
|
10天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
12天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
14天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
12天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
30 9
|
11天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
10天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
11天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。