Ant Design Vue Button按钮

Ant Design Vue Button按钮

按钮类型

<a-button type="primary">Primary主按钮</a-button>
<a-button>Default次按钮</a-button>
<a-button type="dashed">Dashed虚线</a-button>
<a-button type="danger">Danger警告</a-button>
<a-config-provider :autoInsertSpaceInButton="false">
<a-button type="primary">按钮</a-button>
</a-config-provider>
<a-button type="primary">按钮</a-button>
<a-button type="link">Link</a-button>

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

例子

按钮组合

<h4>Basic</h4>
<a-button-group>
<a-button>取消</a-button>
<a-button type="primary">OK</a-button>
</a-button-group>
<a-button-group>
<a-button disabled>左</a-button>
<a-button disabled>中</a-button>
<a-button disabled>右</a-button>
</a-button-group>
<a-button-group>
<a-button type="primary">左</a-button>
<a-button>中</a-button>
<a-button type="dashed">右</a-button>
</a-button-group>

<h4>With Icon</h4>
<a-button-group>
<a-button type="primary"> <a-icon type="left" />Go back </a-button>
<a-button type="primary">跳转<a-icon type="right" /> </a-button>
</a-button-group>

可以将多个按钮放入按钮组的容器中。

例子

幽灵按钮

<div :style="{ background: '#ddd', padding: '26px 16px 16px' }">
<a-button type="primary" ghost>Primary</a-button>
<a-button ghost>Default</a-button>
<a-button type="dashed" ghost>Dashed</a-button>
<a-button type="danger" ghost>Danger</a-button>
<a-button type="link" ghost>Link</a-button>
</div>

幽灵按钮就是背景为透明的按，通常用在有色背景上。

例子

图标按钮

<a-button type="primary" shape="circle" icon="search"></a-button>
<a-button type="primary" icon="lock">使用icon属性</a-button>
<a-button shape="circle" icon="search"></a-button>
<a-button icon="search">Search</a-button>
<a-button shape="circle" icon="search"></a-button>
<a-button>
    <a-icon type="pie-chart"> </a-icon>
    使用Icon组件
</a-button>
<a-button type="dashed" shape="circle" icon="search"></a-button>
<a-button type="dashed" icon="search">Search</a-button>

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

例子

加载中状态

html代码

<a-button type="primary" loading>
    Loading
</a-button>
<a-button type="primary" :loading="loading" @mouseenter="enterLoading">
    鼠标放此上面
</a-button>
<a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
    点击按钮试试看
</a-button>

js代码

var app = new Vue({
    el: '#app',
    data() {
        return {
            loading: false,
            iconLoading: false,
        };
    },
    methods: {
        enterLoading() {
            this.loading = true;
        },
        enterIconLoading() {
            this.iconLoading = { delay: 1000 };
        },
    },
});

按钮添加 loading 属性即可处于加载中状态

例子

按钮大小

<a-button type="primary" size="large">large大尺寸</a-button>
<a-button size="default">default默认大小</a-button>
<a-button type="dashed" size="small">small小尺寸</a-button>

按钮有大、中、小三种尺寸,可设置 size 属性为 large default small 。

例子

block按钮

<a-button type="primary" block>Primary</a-button>
<a-button block>Default</a-button>
<a-button type="dashed" block>Dashed</a-button>
<a-button type="danger" block>Danger</a-button>
<a-button type="link" block>Link</a-button>

block按钮的宽度和父容器的宽度一样

例子