Button 按钮组件

这是基础按钮组件，支持不同类型。以下示例展示如何使用带 yf- 前缀的 button 组件：

基础用法

<template>
    <yf-button>默认按钮</yf-button>
    <yf-button type="primary" @click="handleClick('主要按钮')">主要按钮</yf-button>
    <yf-button type="success" @click="handleClick('成功按钮')">成功按钮</yf-button>
    <yf-button type="warning" @click="handleClick('警告按钮')">警告按钮</yf-button>
    <yf-button type="danger" @click="handleClick('危险按钮')">危险按钮</yf-button>
    <yf-button type="info" @click="handleClick('默认按钮')">信息按钮</yf-button>
</template>

<script setup lang="ts">
    const handleClick = (nameType: string) => {
        console.log(`${nameType} 被点击了`);
    };
</script>
<style scoped></style>

plain朴素按钮

使用 type、plain、定义样式。

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

禁用状态

<template>
  <yf-button disabled>默认按钮</yf-button>
  <yf-button type="primary" disabled>主要按钮</yf-button>
  <yf-button type="success" disabled>成功按钮</yf-button>
</template>

圆角按钮

<template>
  <yf-button round>默认按钮</yf-button>
  <yf-button type="primary" round>主要按钮</yf-button>
  <yf-button type="success" round>成功按钮</yf-button>
</template>

圆形按钮

<template>
  <yf-button circle icon="Plus" />
  <yf-button type="primary" circle icon="Edit" />
  <yf-button type="success" circle icon="Check" />
</template>

尺寸大小

<template>
  <yf-button size="large">大按钮</yf-button>
  <yf-button>默认按钮</yf-button>
  <yf-button size="small">小按钮</yf-button>
  <yf-button size="mini">迷你按钮</yf-button>
</template>

图标按钮

<template>
  <yf-button icon="Search">搜索</yf-button>
  <yf-button type="primary" icon="Edit">编辑</yf-button>
  <yf-button type="success" icon="Check">提交</yf-button>
</template>