SuitButton 按钮

说明

1、SuitButton按钮基于el-button组件进行的二次封装。
2、主要添加了水波纹效果

示例

默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 圆角按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮

<template>
<el-row >
  <suit-button>默认按钮</suit-button>
  <suit-button type="primary">主要按钮</suit-button>
  <suit-button type="success">成功按钮</suit-button>
  <suit-button type="info">信息按钮</suit-button>
  <suit-button type="warning">警告按钮</suit-button>
  <suit-button type="danger">危险按钮</suit-button>
</el-row>

<el-row style="margin-top:20px">
  <suit-button plain>朴素按钮</suit-button>
  <suit-button type="primary" plain>主要按钮</suit-button>
  <suit-button type="success" plain>成功按钮</suit-button>
  <suit-button type="info" plain>信息按钮</suit-button>
  <suit-button type="warning" plain>警告按钮</suit-button>
  <suit-button type="danger" plain>危险按钮</suit-button>
</el-row>

<el-row style="margin-top:20px">
  <suit-button round>圆角按钮</suit-button>
  <suit-button type="primary" round>主要按钮</suit-button>
  <suit-button type="success" round>成功按钮</suit-button>
  <suit-button type="info" round>信息按钮</suit-button>
  <suit-button type="warning" round>警告按钮</suit-button>
  <suit-button type="danger" round>危险按钮</suit-button>
</el-row>

<el-row style="margin-top:20px">
  <suit-button icon="el-icon-search" circle></suit-button>
  <suit-button type="primary" icon="el-icon-edit" circle></suit-button>
  <suit-button type="success" icon="el-icon-check" circle></suit-button>
  <suit-button type="info" icon="el-icon-message" circle></suit-button>
  <suit-button type="warning" icon="el-icon-star-off" circle></suit-button>
  <suit-button type="danger" icon="el-icon-delete" circle></suit-button>
</el-row>
</template>

Expand Copy Copy