button

按钮组件

• 体验提升-点击按钮会产生水波涟漪
• 二次封装el-button 适配其所有属性方法

基础用法

<template>
  <div class="mb-2base">
    <adv-button>default</adv-button>
    <adv-button type="primary">primary</adv-button>
    <adv-button type="danger">danger</adv-button>
    <adv-button type="warning">warning</adv-button>
    <adv-button type="success">success</adv-button>
    <adv-button type="secondary">secondary</adv-button>
    <adv-button color="#888">自定义颜色</adv-button>
  </div>
  <div class="mb-2base">
    <adv-button plain>default</adv-button>
    <adv-button type="primary" plain>primary</adv-button>
    <adv-button type="danger" plain>danger</adv-button>
    <adv-button type="warning" plain>warning</adv-button>
    <adv-button type="success" plain>success</adv-button>
    <adv-button type="secondary" plain>secondary</adv-button>
  </div>
  <div class="mb-2base">
    <adv-button icon="leisure">default</adv-button>
    <adv-button type="primary" icon="leisure"></adv-button>
    <adv-button type="danger" icon="leisure"></adv-button>
    <adv-button type="warning" icon="leisure">warning</adv-button>
    <adv-button type="success" icon="leisure">success</adv-button>
    <adv-button type="secondary" icon="leisure">secondary</adv-button>
  </div>
  <div class="mb-2base">
    <adv-button round icon="leisure">default</adv-button>
    <adv-button round type="primary" icon="leisure"></adv-button>
    <adv-button round type="danger" icon="leisure"></adv-button>
    <adv-button round type="warning" icon="leisure">warning</adv-button>
    <adv-button round type="success" icon="leisure">success</adv-button>
    <adv-button round type="secondary" icon="leisure">secondary</adv-button>
  </div>
  <div class="mb-2base">
    <adv-button circle type="primary" icon="leisure"></adv-button>
    <adv-button circle type="danger" icon="leisure"></adv-button>
  </div>
</template>

禁用状态

<template>
  <adv-button disabled>default</adv-button>
  <adv-button disabled type="primary">primary</adv-button>
  <adv-button disabled type="danger">danger</adv-button>
  <adv-button disabled type="warning">warning</adv-button>
  <adv-button disabled type="success">success</adv-button>
  <adv-button disabled color="#888">自定义颜色</adv-button>
</template>

text 状态

<template>
  <adv-button text>default</adv-button>
  <adv-button text type="primary">primary</adv-button>
  <adv-button text type="danger">danger</adv-button>
  <adv-button text type="warning">warning</adv-button>
  <adv-button text type="success">success</adv-button>
  <adv-button text type="secondary">secondary</adv-button>
</template>

loading 状态

<template>
  <adv-button loading>default</adv-button>
  <adv-button loading icon="leisure" type="primary">primary</adv-button>
  <adv-button loading type="danger">danger</adv-button>
  <adv-button loading type="warning">warning</adv-button>
  <adv-button loading type="success">success</adv-button>
  <adv-button loading color="#888">自定义颜色</adv-button>
</template>

模型接口

type buttonTypeI =
  | "default"
  | "primary"
  | "danger"
  | "info"
  | "warning"
  | "success"
  | "secondary";

interface buttonI {
  type?: buttonTypeI;
  color?: string;
  icon?: string;
  disabled?: boolean;
  plain?: boolean;
  text?: boolean;
  loading?: boolean;
  round?: boolean;
  circle?: boolean;
}

属性

属性	值	是否必填	默认值	说明
type	default | primary | danger | success | info | warning | secondary	否	default	类型
plain	Boolean	否	false	是否空心
loading	Boolean	否	false	是否 loading
circle	Boolean	否	false	是否 圆形
round	Boolean	否	false	是否 环形
text	Boolean	否	false	是否 为链接
icon	string	否	false	图标

插槽

插槽名	是否必填	默认值	说明
default	否		按钮文字