ZjlButton

一个基于 Vue 3 的按钮组件库

安装

npm install zjluse-button

使用方法

全局注册

import { createApp } from 'vue';
import ZjlButton from 'zjluse-button';
import 'zjluse-button/dist/style.css'; // 导入样式文件

const app = createApp(App);
app.component('ZjlButton', ZjlButton);
app.mount('#app');

局部注册

<template>
  <ZjlButton variant="default" size="lg" @click="handleClick"> 点击我 </ZjlButton>
</template>

<script setup>
import { ZjlButton } from 'zjluse-button';
import 'zjluse-button/dist/style.css'; // 导入样式文件

const handleClick = () => {
  console.log('按钮被点击了');
};
</script>

API

Props

| 属性 | 类型 | 默认值 | 描述 | | -------- | --------------------------------------------------------------------------- | --------- | ------------ | | text | string | - | 按钮文本 | | onClick | function | - | 点击回调函数 | | disabled | boolean | false | 是否禁用 | | type | 'button' | 'submit' | 'reset' | 'button' | 按钮类型 | | variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | 按钮样式变体 | | size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | 按钮尺寸 |

Events

| 事件名 | 参数 | 描述 | | ------ | ----------------- | -------- | | click | event: MouseEvent | 点击事件 |

许可证

MIT