@zhaoren118/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/style.css";

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

局部使用

<script setup lang="ts">
import { YouyuButton } from "youyu-button";
import "youyu-button/dist/style.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		自定义类名
data-toggle	string		交互类型：message, confirm, layer
data-message	string	操作成功	提示消息内容
data-type	string	success	消息类型：success, error, warning, info
data-confirm-message	string	确定要执行此操作吗？	确认对话框消息
data-layer-title	string	弹窗	弹窗标题
data-layer-url	string	#	弹窗内容 URL

事件

事件名	说明	参数
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"
  rounded
  data-toggle="message"
  data-message="操作成功！"
  data-type="success"
>
  显示成功提示
</YouyuButton>

确认对话框

<YouyuButton
  type="primary"
  rounded
  data-toggle="confirm"
  data-confirm-message="确定要删除这个项目吗？"
  data-message="删除成功！"
>
  确认删除
</YouyuButton>

弹窗

<YouyuButton
  type="primary"
  rounded
  data-toggle="layer"
  data-layer-title="示例弹窗"
  data-layer-url="#"
>
  打开弹窗
</YouyuButton>

项目开发

安装依赖

pnpm install

开发模式

pnpm dev

构建生产版本

pnpm build

许可证

MIT