Button 按钮 常用的操作按钮。
基础用法 使用 type, plain, round, dashed 和 circle 来定义按钮的样式。
DefaultPrimarySuccessInfoWarningDangerPlainPrimarySuccessInfoWarningDangerRoundPrimarySuccessInfoWarningDangerDashedPrimarySuccessInfoWarningDangervue
隐藏源代码禁用状态 你可以使用 disabled 属性来定义按钮是否被禁用。
使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。
DefaultPrimarySuccessInfoWarningDangerPlainPrimarySuccessInfoWarningDangervue
隐藏源代码链接按钮 WARNING
type="text" 已被 废弃，将于版本 3.0.0 时 移除，请考虑切换至新的 API。
新的 API link 于 2.2.1 版本时添加，你可以使用 type API 设置链接按钮的主题样式
Basic link button
plainprimarysuccessinfowarningdangerDisabled link button
plainprimarysuccessinfowarningdangervue
Basic link button
v-for="button in buttons" :key="button.text" :type="button.type" link > {{ button.text }}
Disabled link button
v-for="button in buttons" :key="button.text" :type="button.type" link disabled > {{ button.text }}
隐藏源代码文字按钮 TIP
文字按钮在现在有了全新的设计样式。 2.2.0 如果您想要使用老版样式的按钮，可以考虑使用 Link 组件。
API也已更新，由于 type 属性会同时控制按钮的样式， 因此我们通过一个新的 API text: boolean 来控制文字按钮。
没有边框和背景色的按钮。
Basic text button
plainprimarysuccessinfowarningdangerBackground color always on
plainprimarysuccessinfowarningdangerDisabled text button
plainprimarysuccessinfowarningdangervue
Basic text button
v-for="button in buttons" :key="button.text" :type="button.type" text > {{ button.text }}
Background color always on
v-for="button in buttons" :key="button.text" :type="button.type" text bg > {{ button.text }}
Disabled text button
v-for="button in buttons" :key="button.text" :type="button.type" text disabled > {{ button.text }}
隐藏源代码图标按钮 使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加标签来添加图标， 你也可以使用自定义图标。
Search Uploadvue
Upload
隐藏源代码按钮组 以按钮组的方式出现，常用于多项类似操作。
在 2.11.9 中，您可以使用 direction 属性。
使用
Previous Page Next PageHorizontalVerticalvue
Next Page
隐藏源代码加载状态按钮 点击按钮来加载数据，并向用户反馈加载状态。
通过设置 loading 属性为 true 来显示加载中状态。
TIP
您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标
ps: loading 插槽优先级高于loadingIcon属性
LoadingLoading Loading vue
class="path" d=" M 30 15 L 28 17 M 25.61 25.61 A 15 15, 0, 0, 1, 15 30 A 15 15, 0, 1, 1, 27.99 7.5 L 15 15 " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" />
Loading
隐藏源代码调整尺寸 除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
使用 size 属性额外配置尺寸，可使用 large和small两种值。
LargeDefaultSmallSearchSearchSearchLargeDefaultSmallSearchSearchSearchvue
隐藏源代码Tag 2.3.4 您可以自定义元素标签。例如，按钮，div，路由链接，nuxt链接。
buttondiv a vue
type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank" rel="noopener noreferrer" > a 隐藏源代码自定义颜色 beta 您可以自定义按钮的颜色。 我们将自动计算按钮处于 hover 和 active 状态时的颜色。 DefaultPlainDisabled Disabled Plain vue Disabled Plain
隐藏源代码Button API Button Attributes 属性名说明类型默认值size尺寸enum—type按钮类型，在设置color时，后者优先。enum—plain是否为朴素按钮booleanfalsetext 2.2.0是否为文字按钮booleanfalsebg 2.2.0是否显示文字按钮背景颜色booleanfalselink 2.2.1是否为链接按钮booleanfalseround是否为圆角按钮booleanfalsecircle是否为圆形按钮booleanfalsedashed 2.13.3是否是虚线按钮booleanfalseloading是否为加载中状态booleanfalseloading-icon自定义加载中状态图标组件string / ComponentLoadingdisabled按钮是否为禁用状态booleanfalseicon图标组件string / Component—autofocus原生 autofocus 属性booleanfalsenative-type原生 type 属性enumbuttonauto-insert-space两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效)booleanfalsecolor自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色string—darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色booleanfalsetag 2.3.4自定义元素标签string / ComponentbuttonButton Slots 插槽名说明default自定义默认内容loading自定义加载中组件icon自定义图标组件Button Exposes 属性名说明类型ref按钮 html 元素objectsize按钮尺寸objecttype按钮类型objectdisabled按钮已禁用objectshouldAddSpace是否在两个字符之间插入空格objectButtonGroup API ButtonGroup Attributes 属性名说明类型默认值size用于控制该按钮组内按钮的大小enum—type用于控制该按钮组内按钮的类型enum—direction 2.11.9展示的方向enumhorizontalButtonGroup Slots 插槽名说明子标签default自定义按钮组内容Button源代码 组件 • 样式 • 文档
贡献者