BaseButton 基础按钮

BaseButton 基础按钮

【免费下载链接】vuetify 🐉 Vue Component Framework 项目地址: https://gitcode.com/gh_mirrors/vu/vuetify

基础按钮组件，基于Vuetify的VBtn封装，预设了项目常用样式和行为。

示例

基本用法

默认按钮

<base-button>默认按钮</base-button>

不同样式

主要按钮 次要按钮 描边按钮 文本按钮

<base-button color="primary">主要按钮</base-button>
<base-button color="secondary">次要按钮</base-button>
<base-button variant="outlined">描边按钮</base-button>
<base-button variant="text">文本按钮</base-button>

Props

属性名	类型	默认值	说明
color	String	'primary'	按钮颜色，可选值：primary, secondary, success, warning, error, info
variant	String	'elevated'	按钮样式变体，可选值：elevated, flat, outlined, text, tonal, plain
size	String	'default'	按钮大小，可选值：x-small, small, default, large, x-large
loading	Boolean	false	是否显示加载状态
disabled	Boolean	false	是否禁用按钮

Events

事件名	参数	说明
click	event	点击事件

### 组件测试

为保证组件质量，建议为封装的组件编写单元测试。使用Vue Test Utils配合Jest或Vitest进行测试：

```javascript
// tests/unit/components/base/BaseButton.spec.ts
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import BaseButton from '@/components/base/BaseButton.vue'

describe('BaseButton.vue', () => {
  it('renders button text correctly', () => {
    const wrapper = mount(BaseButton, {
      slots: {
        default: '测试按钮'
      }
    })
    
    expect(wrapper.text()).toContain('测试按钮')
  })
  
  it('applies the correct variant class', () => {
    const wrapper = mount(BaseButton, {
      props: {
        variant: 'outlined'
      }
    })
    
    expect(wrapper.findComponent({ name: 'VBtn' }).props().variant).toBe('outlined')
  })
  
  it('emits click event when clicked', async () => {
    const onClick = vi.fn()
    const wrapper = mount(BaseButton, {
      on: {
        click: onClick
      }
    })
    
    await wrapper.trigger('click')
    expect(onClick).toHaveBeenCalled()
  })
  
  it('disables button when disabled prop is true', () => {
    const wrapper = mount(BaseButton, {
      props: {
        disabled: true
      }
    })
    
    expect(wrapper.findComponent({ name: 'VBtn' }).props().disabled).toBe(true)
  })
})

组件库管理与发布

随着组件数量增多，需要建立一套完善的组件库管理和发布机制，以保证组件的质量和版本控制。

版本控制

采用语义化版本控制(Semantic Versioning)：

• 主版本号(Major)：当进行不兼容的API更改时
• 次版本号(Minor)：当添加功能，但保持向后兼容时
• 补丁版本号(Patch)：当进行向后兼容的问题修复时

发布流程

1. 组件开发完成后，编写文档和测试
2. 提交代码并创建Pull Request
3. 代码审查通过后合并到主分支
4. 运行构建命令生成组件库包
5. 更新版本号并发布到npm或内部包管理系统

按需引入

为减小最终构建体积，推荐使用按需引入的方式使用组件：

// 按需引入组件
import { createApp } from 'vue'
import App from './App.vue'
import { BaseButton, BaseInput } from 'my-component-library'

const app = createApp(App)
app.component('BaseButton', BaseButton)
app.component('BaseInput', BaseInput)
app.mount('#app')

【免费下载链接】vuetify 🐉 Vue Component Framework 项目地址: https://gitcode.com/gh_mirrors/vu/vuetify