网站新闻前置审批,分析网站设计,网站诊断从哪里开始,北京营销型网站建设方案常用的操作按钮。
基础用法# 使用 type、plain、round 和 circle 来定义按钮的样式。
DefaultPrimarySuccessInfoWarningDanger
PlainPrimarySuccessInfoWarningDanger
RoundPrimarySuccessInfoWarningDanger 禁用状态#
你可以使用 disabled 属性来定义按钮是否被禁用。 使…常用的操作按钮。
基础用法# 使用 type、plain、round 和 circle 来定义按钮的样式。
DefaultPrimarySuccessInfoWarningDanger
PlainPrimarySuccessInfoWarningDanger
RoundPrimarySuccessInfoWarningDanger 禁用状态#
你可以使用 disabled 属性来定义按钮是否被禁用。 使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。
DefaultPrimarySuccessInfoWarningDanger
PlainPrimarySuccessInfoWarningDanger 链接按钮#
WARNING
typetext 已被 废弃将于版本 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 属性额外配置尺寸可使用 large和small两种值。
LargeDefaultSmallSearchSearchSearch
LargeDefaultSmallSearchSearchSearch Tag2.3.4#
您可以自定义元素标签。例如按钮div路由链接nuxt链接。 button
div
a 自定义颜色beta#
您可以自定义按钮的颜色。
我们将自动计算按钮处于 hover 和 active 状态时的颜色。 DefaultPlainDisabledDisabled Plain Button API#
Button Attributes#
属性名说明类型默认值size尺寸enum—type类型enum—plain是否为朴素按钮booleanfalsetext 2.2.0是否为文字按钮booleanfalsebg 2.2.0是否显示文字按钮背景颜色booleanfalselink 2.2.1是否为链接按钮booleanfalseround是否为圆角按钮booleanfalsecircle是否为圆形按钮booleanfalseloading是否为加载中状态booleanfalseloading-icon自定义加载中状态图标组件string / ComponentLoadingdisabled按钮是否为禁用状态booleanfalseicon图标组件string / Component—autofocus原生 autofocus 属性booleanfalsenative-type原生 type 属性enumbuttonauto-insert-space自动在两个中文字符之间插入空格boolean—color自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色string—darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色booleanfalsetag 2.3.4自定义元素标签string / Componentbutton
Button Slots#
插槽名说明default自定义默认内容loading自定义加载中组件icon自定义图标组件
Button Exposes#
属性名说明类型ref按钮 html 元素objectsize按钮尺寸objecttype按钮类型objectdisabled按钮已禁用objectshouldAddSpace是否在两个字符之间插入空格object
ButtonGroup API#
ButtonGroup Attributes#
插槽名说明类型默认值size用于控制该按钮组内按钮的大小enum—type用于控制该按钮组内按钮的类型enum—
ButtonGroup Slots#
插槽名说明子标签default自定义按钮组内容Button
源代码#
组件 • 文档
