MyButton Component

一个简单的Vue 3按钮组件。

安装

npm install steven4857-hw-ui

使用

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import MyButtonComponent from 'steven4857-hw-ui'
import 'steven4857-hw-ui/dist/style.css'

const app = createApp(App)
app.use(MyButtonComponent)
app.mount('#app')

局部注册

<template>
  <MyButton>默认按钮</MyButton>
  <MyButton type="primary">主要按钮</MyButton>
  <MyButton type="success">成功按钮</MyButton>
  <MyButton type="warning">警告按钮</MyButton>
  <MyButton type="danger">危险按钮</MyButton>
  <MyButton disabled>禁用按钮</MyButton>
  <MyButton loading>加载中按钮</MyButton>
</template>

<script setup>
import { MyButton } from 'steven4857-hw-ui'
import 'steven4857-hw-ui/dist/style.css'
</script>

属性

| 属性名 | 类型 | 默认值 | 可选值 | 描述 | |---------|---------|----------|-------------------------------------------|------------| | text | String | button | - | 按钮文字 | | type | String | default | default, primary, success, warning, danger | 按钮类型 | | disabled| Boolean | false | - | 是否禁用 | | loading | Boolean | false | - | 是否加载中 |

事件

| 事件名 | 参数 | 描述 | |-------|-----------|------------| | click | MouseEvent | 点击按钮时触发 |