Button 按钮

前言

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

默认按钮

<template>
  <web-row class="mb-4">
    <web-button>Default</web-button>
    <web-button type="primary">Primary</web-button>
    <web-button type="success">Success</web-button>
    <web-button type="info">Info</web-button>
    <web-button type="warning">Warning</web-button>
    <web-button type="danger">Danger</web-button>
  </web-row>
  <web-row class="mb-4">
    <web-button plain>Plain</web-button>
    <web-button type="primary" plain>Primary</web-button>
    <web-button type="success" plain>Success</web-button>
    <web-button type="info" plain>Info</web-button>
    <web-button type="warning" plain>Warning</web-button>
    <web-button type="danger" plain>Danger</web-button>
  </web-row>
  <web-row class="mb-4">
    <web-button round>Round</web-button>
    <web-button type="primary" round>Primary</web-button>
    <web-button type="success" round>Success</web-button>
    <web-button type="info" round>Info</web-button>
    <web-button type="warning" round>Warning</web-button>
    <web-button type="danger" round>Danger</web-button>
  </web-row>
  <web-row class="mb-4">
    <web-button :icon="Search" circle />
    <web-button type="primary" :icon="Edit" circle />
    <web-button type="success" :icon="Check" circle />
    <web-button type="info" :icon="Message" circle />
    <web-button type="warning" :icon="Star" circle />
    <web-button type="danger" :icon="Delete" circle />
  </web-row>
</template>

<script lang="ts" setup>
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue";
</script>

<style lang="scss" scoped>
.mb-4 {
  display: block;
  margin-top: 20px;
}
</style>

禁用状态

<template>
  <web-row class="mb-4">
    <web-button disabled>Default</web-button>
    <web-button type="primary" disabled>Primary</web-button>
    <web-button type="success" disabled>Success</web-button>
    <web-button type="info" disabled>Info</web-button>
    <web-button type="warning" disabled>Warning</web-button>
    <web-button type="danger" disabled>Danger</web-button>
  </web-row>

  <web-row>
    <web-button plain disabled>Plain</web-button>
    <web-button type="primary" plain disabled>Primary</web-button>
    <web-button type="success" plain disabled>Success</web-button>
    <web-button type="info" plain disabled>Info</web-button>
    <web-button type="warning" plain disabled>Warning</web-button>
    <web-button type="danger" plain disabled>Danger</web-button>
  </web-row>
</template>

链接按钮

Basic link button

Disabled link button

<template>
  <p>Basic link button</p>
  <div class="flex justify-space-between mb-4 flex-wrap gap-4">
    <web-button v-for="button in buttons" :key="button.text" :type="button.type" link>{{
      button.text
    }}</web-button>
  </div>

  <p>Disabled link button</p>
  <div class="flex justify-space-between flex-wrap gap-4">
    <web-button v-for="button in buttons" :key="button.text" :type="button.type" link disabled>{{ button.text
      }}</web-button>
  </div>
</template>

<script setup lang="ts">
const buttons = [
  { type: "", text: "plain" },
  { type: "primary", text: "primary" },
  { type: "success", text: "success" },
  { type: "info", text: "info" },
  { type: "warning", text: "warning" },
  { type: "danger", text: "danger" },
] as const;
</script>

自定义颜色

<template>
  <web-row>
    <web-button size="large">Large</web-button>
    <web-button>Default</web-button>
    <web-button size="middle">Small</web-button>
    <web-button size="large" :icon="Search">Search</web-button>
    <web-button :icon="Search">Search</web-button>
    <web-button size="middle" :icon="Search">Search</web-button>
  </web-row>
  <web-row class="web-4">
    <web-button size="large" round>Large</web-button>
    <web-button round>Default</web-button>
    <web-button size="middle" round>Small</web-button>
    <web-button size="large" :icon="Search" round>Search</web-button>
    <web-button :icon="Search" round>Search</web-button>
    <web-button size="middle" :icon="Search" round>Search</web-button>
  </web-row>
  <web-row>
    <web-button :icon="Search" size="large" circle />
    <web-button :icon="Search" circle />
    <web-button :icon="Search" size="middle" circle />
  </web-row>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
</script>

Button 属性

属性名	说明	类型	可选值	默认值
size	尺寸	string	large / default /small	—
type	类型	string	primary / success / warning / danger / info / text	—
round	是否为圆角按钮	boolean	—	false
circle	是否为圆形按钮	boolean	—	false