Vite UI Library

一个基于 Vite 构建的现代 Vue 3 UI 组件库，提供高质量的按钮和消息通知组件。

特性

• 🚀 基于 Vue 3 + TypeScript + Vite
• 🎨 现代化设计，支持多种主题和样式
• 📱 响应式设计，支持移动端
• 🔧 高度可定制，支持多种配置选项
• 📦 轻量级，按需加载
• 🎯 完整的 TypeScript 支持

安装

npm install vite-ui-library

使用

引入组件

import { Button, Message, showMessage } from "vite-ui-library";

按钮组件

<template>
  <!-- 基础按钮 -->
  <Button>默认按钮</Button>
  <Button variant="primary">主要按钮</Button>
  <Button variant="success">成功按钮</Button>

  <!-- 不同尺寸 -->
  <Button size="small">小按钮</Button>
  <Button size="large">大按钮</Button>

  <!-- 轮廓按钮 -->
  <Button outline>轮廓按钮</Button>

  <!-- 圆角按钮 -->
  <Button rounded>圆角按钮</Button>

  <!-- 加载状态 -->
  <Button :loading="loading">加载中...</Button>

  <!-- 禁用状态 -->
  <Button disabled>禁用按钮</Button>

  <!-- 块级按钮 -->
  <Button block>块级按钮</Button>
</template>

消息通知组件

组件方式

<template>
  <Message
    type="success"
    title="成功"
    message="操作成功完成"
    :duration="3000"
    @close="handleClose"
  />
</template>

函数方式

import { message } from "vite-ui-library";

// 基础用法
message.success("操作成功！");
message.warning("请注意！");
message.error("操作失败！");
message.info("提示信息");

// 自定义配置
message.show({
  type: "success",
  title: "成功",
  message: "数据保存成功",
  duration: 5000,
  position: "top-right",
});

API 文档

Button 组件

Props

| 属性 | 类型 | 默认值 | 说明 | | -------- | -------------------------------------------------------------------------- | ----------- | ---------------- | | type | 'button' \| 'submit' \| 'reset' | 'button' | 按钮类型 | | variant | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' | 'primary' | 按钮变体 | | size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮尺寸 | | disabled | boolean | false | 是否禁用 | | loading | boolean | false | 是否显示加载状态 | | outline | boolean | false | 是否为轮廓样式 | | rounded | boolean | false | 是否为圆角样式 | | block | boolean | false | 是否为块级元素 |

Events

| 事件名 | 参数 | 说明 | | ------ | ------------------- | -------- | | click | event: MouseEvent | 点击事件 |

Message 组件

Props

| 属性 | 类型 | 默认值 | 说明 | | -------- | ----------------------------------------------------------------------------------- | -------- | ---------------------------------- | | type | 'success' \| 'warning' \| 'error' \| 'info' | 'info' | 消息类型 | | title | string | - | 消息标题 | | message | string | - | 消息内容 | | duration | number | 3000 | 显示时长（毫秒），0 表示不自动关闭 | | closable | boolean | true | 是否显示关闭按钮 | | showIcon | boolean | true | 是否显示图标 | | position | 'top' \| 'top-right' \| 'top-left' \| 'bottom' \| 'bottom-right' \| 'bottom-left' | 'top' | 显示位置 | | offset | number | 20 | 距离边缘的偏移量 |

Events

| 事件名 | 参数 | 说明 | | ------ | ---- | -------- | | close | - | 关闭事件 |

开发

安装依赖

npm install

启动开发服务器

npm run dev

构建库

npm run build

类型检查

npm run type-check

项目结构

src/
├── components/          # 组件目录
│   ├── Button.vue      # 按钮组件
│   └── Message.vue     # 消息组件
├── utils/              # 工具函数
│   └── message.ts      # 消息工具函数
├── PebbleUI/               # 演示页面
│   ├── App.vue         # 演示主组件
│   └── main.ts         # 演示入口
└── index.ts            # 库入口文件

许可证

MIT