vue element plus Button 按钮

2024-01-09 20:26:44

常用的操作按钮。

基础用法#

使用?typeplainround?和?circle?来定义按钮的样式。

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是否为朴素按钮booleanfalse
text 2.2.0是否为文字按钮booleanfalse
bg 2.2.0是否显示文字按钮背景颜色booleanfalse
link 2.2.1是否为链接按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
loading是否为加载中状态booleanfalse
loading-icon自定义加载中状态图标组件string / ComponentLoading
disabled按钮是否为禁用状态booleanfalse
icon图标组件string / Component
autofocus原生 autofocus 属性booleanfalse
native-type原生 type 属性enumbutton
auto-insert-space自动在两个中文字符之间插入空格boolean
color自定义按钮颜色, 并自动计算 hoveractive 触发后的颜色string
darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色booleanfalse
tag 2.3.4自定义元素标签string / Componentbutton

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

源代码#

组件???文档

文章来源:https://blog.csdn.net/m0_72196169/article/details/135487899
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。