基于Vue框架协同Ant Design UI框架开发之按钮运用

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

组件注册

import { Button } from 'ant-design-vue';
Vue.use(Button);

代码演示

Primary Default Dashed Danger

按钮类型 #

按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。

[图片上传失败...(image-489a25-1555835745885)]

[图片上传失败...(image-f06430-1555835745885)]

Basic

Cancel OK

L M R

L M M R

With Icon

Go back Go forward

按钮组合 #

可以将多个 Button 放入 Button.Group 的容器中。
通过设置 size 为 large small 分别把按钮组合设为大、小尺寸。若不设置 size，则尺寸为中。

[图片上传失败...(image-233cfa-1555835745885)]

[图片上传失败...(image-a9ff5c-1555835745885)]

Primary Primary(disabled)
Default Default(disabled)
Dashed Dashed(disabled)

Ghost Ghost(disabled)

不可用状态 #

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

[图片上传失败...(image-ac6e3d-1555835745885)]

[图片上传失败...(image-1af129-1555835745885)]

Primary Default Dashed danger

幽灵按钮 #

幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。

[图片上传失败...(image-2f954-1555835745884)]

[图片上传失败...(image-fa08eb-1555835745884)]

Search Search Search Search

图标按钮 #

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

[图片上传失败...(image-f3fb4c-1555835745884)]

[图片上传失败...(image-a308f6-1555835745884)]

Loading Loading
mouseenter me! 延迟1s

加载中状态 #

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

[图片上传失败...(image-3f0834-1555835745884)]

[图片上传失败...(image-9f1d25-1555835745884)]

Primary secondary Actions

多个按钮组合 #

按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 Dropdown.Button 中组合使用。

[图片上传失败...(image-8e96ac-1555835745884)]

[图片上传失败...(image-de94d4-1555835745884)]

<label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" style="box-sizing: border-box; touch-action: manipulation; margin: 0px; height: 32px; line-height: 30px; color: rgb(24, 144, 255); display: inline-block; transition: all 0.3s ease 0s; cursor: pointer; border-width: 1.02px 1px 1px; border-style: solid; border-color: rgb(24, 144, 255); border-image: initial; background: rgb(255, 255, 255); padding: 0px 15px; position: relative; box-shadow: none !important; z-index: 1; border-radius: 4px 0px 0px 4px;"><input type="radio" class="ant-radio-button-input" value="large" style="box-sizing: border-box; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; overflow: visible; padding: 0px; touch-action: manipulation; opacity: 0; width: 0px; height: 0px;">Large</label><label class="ant-radio-button-wrapper" style="box-sizing: border-box; touch-action: manipulation; margin: 0px; height: 32px; line-height: 30px; color: rgba(0, 0, 0, 0.65); display: inline-block; transition: all 0.3s ease 0s; cursor: pointer; border-width: 1.02px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgb(217, 217, 217); border-right-color: rgb(217, 217, 217); border-bottom-color: rgb(217, 217, 217); border-image: initial; border-left-style: initial; border-left-color: initial; background: rgb(255, 255, 255); padding: 0px 15px; position: relative;"><input type="radio" class="ant-radio-button-input" value="default" style="box-sizing: border-box; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; overflow: visible; padding: 0px; touch-action: manipulation; opacity: 0; width: 0px; height: 0px;">Default</label><label class="ant-radio-button-wrapper" style="box-sizing: border-box; touch-action: manipulation; margin: 0px; height: 32px; line-height: 30px; color: rgba(0, 0, 0, 0.65); display: inline-block; transition: all 0.3s ease 0s; cursor: pointer; border-width: 1.02px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgb(217, 217, 217); border-right-color: rgb(217, 217, 217); border-bottom-color: rgb(217, 217, 217); border-image: initial; border-left-style: initial; border-left-color: initial; background: rgb(255, 255, 255); padding: 0px 15px; position: relative; border-radius: 0px 4px 4px 0px;"><input type="radio" class="ant-radio-button-input" value="small" style="box-sizing: border-box; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; overflow: visible; padding: 0px; touch-action: manipulation; opacity: 0; width: 0px; height: 0px;">Small</label>

Primary Normal Dashed Danger
Download

Backward Forward

按钮尺寸 #

按钮有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

[图片上传失败...(image-61e944-1555835745883)]

[图片上传失败...(image-9f36ec-1555835745883)]

Primary Default Dashed danger

block 按钮 #

block属性将使按钮适合其父宽度。

[图片上传失败...(image-e14d90-1555835745883)]

[图片上传失败...(image-900d-1555835745883)]

API #

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled

按钮的属性说明如下：

属性	说明	类型	默认值
disabled	按钮失效状态	boolean	false
ghost	幽灵属性，使按钮背景透明	boolean	false
htmlType	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button
icon	设置按钮的图标类型	string	-
loading	设置按钮载入状态	boolean	{ delay: number }	false
shape	设置按钮形状，可选值为 circle 或者不设	string	-
size	设置按钮大小，可选值为 small large 或者不设	string	default
type	设置按钮类型，可选值为 primary dashed``danger	string	-
block	将按钮宽度调整为其父宽度的选项	boolean	false

事件 #

事件名称	说明	回调参数
click	点击按钮时的回调	(event) => void

<a-button>Hello world!</a-button> 最终会被渲染为 <button><span>Hello world!</span></button>，并且除了上表中的属性，其它属性都会直接传到原生 button 上。