Appearance
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>