Button 按钮

常用的操作按钮。

基础用法

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

<template>
    <Button>Default</Button>
    <Button type="primary">primary</Button>
    <Button type="danger">danger</Button>
    <Button type="success">success</Button>
    <Button type="warning">warning</Button>
    <Button type="info">info</Button>
    <br/>
    <br/>
    <Button plain>Default</Button>
    <Button type="primary" plain>primary</Button>
    <Button type="danger" plain>danger</Button>
    <Button type="success" plain>success</Button>
    <Button type="warning" plain>warning</Button>
    <Button type="info" plain>info</Button>
    <br/>
    <br/>
    <Button round>primary</Button>
    <Button type="primary" round>primary</Button>
    <Button type="danger" round>danger</Button>
    <Button type="success" round>success</Button>
    <Button type="warning" round>warning</Button>
    <Button type="info" round>info</Button>
    <br/>
    <br/>
    <Button type="primary" icon="camera" circle></Button>
    <Button type="primary" icon="house" circle></Button>
    <Button type="danger" icon="user" circle></Button>
    <Button type="success" icon="check" circle></Button>
    <Button type="warning" icon="phone" circle></Button>
    <Button type="info" icon="poo" circle></Button>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
</script>

禁用状态

使用 isabled 属性来定义按钮是否被禁用。

<template>
    <Button disabled>Default</Button>
    <Button disabled type="primary">primary</Button>
    <Button disabled type="danger">danger</Button>
    <Button disabled type="success">success</Button>
    <Button disabled type="warning">warning</Button>
    <Button disabled type="info">info</Button>
    <br/>
    <br/>
    <Button disabled plain>Default</Button>
    <Button disabled type="primary" plain>primary</Button>
    <Button disabled type="danger" plain>danger</Button>
    <Button disabled type="success" plain>success</Button>
    <Button disabled type="warning" plain>warning</Button>
    <Button disabled type="info" plain>info</Button>
    <br/>
    <br/>
    <Button disabled round>primary</Button>
    <Button disabled type="primary" round>primary</Button>
    <Button disabled type="danger" round>danger</Button>
    <Button disabled type="success" round>success</Button>
    <Button disabled type="warning" round>warning</Button>
    <Button disabled type="info" plain>info</Button>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
</script>

调整尺寸

使用 size 属性额外配置尺寸，可使用 large 和 small 两种值。

<template>
    <Button size="large">Default</Button>
    <Button size="large" type="primary">primary</Button>
    <Button size="large" type="danger">danger</Button>
    <Button size="large" type="success">success</Button>
    <Button size="large" type="warning">warning</Button>
    <Button size="large" type="info">info</Button>
    <br/>
    <br/>
    <Button size="large" plain>Default</Button>
    <Button size="large" type="primary" plain>primary</Button>
    <Button size="large" type="danger" plain>danger</Button>
    <Button size="large" type="success" plain>success</Button>
    <Button size="large" type="warning" plain>warning</Button>
    <Button size="large" type="info" plain>info</Button>
    <br/>
    <br/>
    <Button size="large" round>primary</Button>
    <Button size="large" type="primary" round>primary</Button>
    <Button size="large" type="danger" round>danger</Button>
    <Button size="large" type="success" round>success</Button>
    <Button size="large" type="warning" round>warning</Button>
    <Button size="large" type="info" round>info</Button>
    <br/>
    <br/>
    <Button size="small">Default</Button>
    <Button size="small" type="primary">primary</Button>
    <Button size="small" type="danger">danger</Button>
    <Button size="small" type="success">success</Button>
    <Button size="small" type="warning">warning</Button>
    <Button size="small" type="info">info</Button>
    <br/>
    <br/>
    <Button size="small" plain>Default</Button>
    <Button size="small" type="primary" plain>primary</Button>
    <Button size="small" type="danger" plain>danger</Button>
    <Button size="small" type="success" plain>success</Button>
    <Button size="small" type="warning" plain>warning</Button>
    <Button size="small" type="info" plain>info</Button>
    <br/>
    <br/>
    <Button size="small" round>Default</Button>
    <Button size="small" type="primary" round>primary</Button>
    <Button size="small" type="danger" round>danger</Button>
    <Button size="small" type="success" round>success</Button>
    <Button size="small" type="warning" round>warning</Button>
    <Button size="small" type="info" round>info</Button>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
</script>

事件绑定

使用 @click 可以绑定事件

<template>
    <Button @click="handleClick">点击一下</Button>
</template>
<script setup>
import Message from '@/components/Message/Message.vue' 
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'
const handleClick = () => {
    createMessage({ message: 'button 点击事件', duration: 3000, type: 'success', showClose: true })
}
</script>

加载状态

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

<template>
    <Button loading>加载中</Button>
    <Button loading type="primary">加载中</Button>
    <Button loading type="primary" round>加载中</Button>
    <Button loading type="primary" size="small">加载中</Button>
    <Button loading size="small" plain>加载中</Button>
</template>
<script setup>
import Button from '@/components/Button/button.vue'    
</script>

参数

属性名	说明	类型	默认值
type	类型	primary| success| warning| danger|info
size	大小	large | samll
round	圆角	true| false
plain	朴素	true|false
circle	圆形	true|false
disabled	禁止	true|false
icon	图标	string
loading	加载	true|false