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