Button 按钮

常用的操作按钮

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<script setup>
import Button from '@components/Button/index.vue'
</script>

<template>
  <div class="demo-btns">
    <Button type="default">default</Button>
    <Button type="primary">primary</Button>
    <Button type="dashed">dashed</Button>
    <Button type="text">text</Button>
    <Button type="info">info</Button>
    <Button type="success">success</Button>
    <Button type="warning">warning</Button>
    <Button type="error">error</Button>
  </div>
  <div class="demo-btns">
    <Button shape="circle" type="default">default</Button>
    <Button shape="circle" type="primary">primary</Button>
    <Button shape="circle" type="dashed">dashed</Button>
    <Button shape="circle" type="text">text</Button>
    <Button shape="circle" type="info">info</Button>
    <Button shape="circle" type="success">success</Button>
    <Button shape="circle" type="warning">warning</Button>
    <Button shape="circle" type="error">error</Button>
  </div>
</template>

<style>
.demo-btns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin-bottom: 20px;
}
</style>

使用 size 来定义按钮的样式。

<script setup>
import Button from '@components/Button/index.vue'
</script>

<template>
  <div class="demo-btns">
    <Button size="small" type="default">default</Button>
    <Button size="small" type="primary">primary</Button>
    <Button size="small" type="dashed">dashed</Button>
    <Button size="small" type="text">text</Button>
    <Button size="small" type="info">info</Button>
    <Button size="small" type="success">success</Button>
    <Button size="small" type="warning">warning</Button>
    <Button size="small" type="error">error</Button>
  </div>
  <div class="demo-btns">
    <Button size="large" shape="circle" type="default">default</Button>
    <Button size="large" shape="circle" type="primary">primary</Button>
    <Button size="large" shape="circle" type="dashed">dashed</Button>
    <Button size="large" shape="circle" type="text">text</Button>
    <Button size="large" shape="circle" type="info">info</Button>
    <Button size="large" shape="circle" type="success">success</Button>
    <Button size="large" shape="circle" type="warning">warning</Button>
    <Button size="large" shape="circle" type="error">error</Button>
  </div>
</template>

<style>
.demo-btns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin-bottom: 20px;
}
</style>