Button 按钮

基础用法

默认按钮 主要按钮 成功按钮 危险按钮

圆形按钮 主要按钮 成功按钮 危险按钮

使用type和round属性来定义 Button 的样式。

<template>
  <div class="demo-spacing">
    <pd-button>默认按钮</pd-button>
    <pd-button type="primary">主要按钮</pd-button>
    <pd-button type="success">成功按钮</pd-button>
    <pd-button type="warning">危险按钮</pd-button>
  </div>
  <div class="demo-spacing">
    <pd-button round>圆形按钮</pd-button>
    <pd-button type="primary" round>主要按钮</pd-button>
    <pd-button type="success" round>成功按钮</pd-button>
    <pd-button type="warning" round>危险按钮</pd-button>
  </div>
</template>

显示代码 复制代码 复制代码

禁用效果

默认按钮 主要按钮 成功按钮 危险按钮

你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

<template>
  <div>
    <pd-button disabled>默认按钮</pd-button>
    <pd-button type="primary" disabled>主要按钮</pd-button>
    <pd-button type="success" disabled>成功按钮</pd-button>
    <pd-button type="warning" disabled>危险按钮</pd-button>
  </div>
</template>

显示代码 复制代码 复制代码

按钮参数

参数名	类型	默认	说明
type	string	--	可选，按钮类型
icon	string	--	可选，自定义按钮图标
disabled	boolean	false	可选，是否禁用 button
round	boolean	false	可选，是否使用圆角按钮