youyu-button

youyu-button

一个基于 Vue 3 的自定义按钮组件插件，提供丰富的样式和配置选项。

功能特性

• 支持多种按钮类型：默认、主要、次要、成功、警告、危险、信息
• 支持多种按钮尺寸：迷你（MINI）、小（S）、中（M）、大（L）、特大（XL）
• 支持圆角样式
• 支持激活和禁用状态
• 支持自定义类名
• 响应式设计

安装

# 使用 npm
npm install youyu-button

# 使用 yarn
yarn add youyu-button

# 使用 pnpm
pnpm add youyu-button

使用

全局安装

// main.ts
import { createApp } from "vue";
import YouyuButtonPlugin from "youyu-button";
import "youyu-button/dist/main.css";

const app = createApp(App);
app.use(YouyuButtonPlugin);
app.mount("#app");

局部使用

<script setup lang="ts">
import { YouyuButton } from "youyu-button";
import "youyu-button/dist/main.css";
</script>

<template>
  <YouyuButton type="primary">主要按钮</YouyuButton>
</template>

组件属性

属性名	类型	默认值	说明
type	string	default	按钮类型：default, primary, secondary, success, warning, danger, info
size	string	M	按钮尺寸：MINI, S, M, L, XL
rounded	boolean	false	是否显示圆角
active	boolean	false	是否激活状态
disabled	boolean	false	是否禁用状态
className	string		自定义类名

事件

事件名	说明	参数
click	点击事件	MouseEvent

示例

基础按钮

<YouyuButton type="default">默认按钮</YouyuButton>
<YouyuButton type="primary">主要按钮</YouyuButton>
<YouyuButton type="success">成功按钮</YouyuButton>
<YouyuButton type="warning">警告按钮</YouyuButton>
<YouyuButton type="danger">危险按钮</YouyuButton>

不同尺寸

<YouyuButton type="primary" size="MINI">迷你按钮</YouyuButton>
<YouyuButton type="primary" size="S">小按钮</YouyuButton>
<YouyuButton type="primary" size="M">中按钮</YouyuButton>
<YouyuButton type="primary" size="L">大按钮</YouyuButton>
<YouyuButton type="primary" size="XL">特大按钮</YouyuButton>

圆角按钮

<YouyuButton type="primary" rounded>圆角按钮</YouyuButton>

激活和禁用状态

<YouyuButton type="primary" active>激活按钮</YouyuButton>
<YouyuButton type="primary" disabled>禁用按钮</YouyuButton>

自定义类名

<YouyuButton type="primary" className="custom-button">自定义按钮</YouyuButton>

项目开发

安装依赖

pnpm install

开发模式

pnpm dev

构建生产版本

pnpm build

许可证

MIT