npm package: @hhfe/web
Description: 基于Vue2和Element UI的Web端组件库
Latest version: 0.1.2

# @hhfe/web

基于 Vue 2 和 Element UI 的 Web 端组件库，为桌面端应用提供高质量的 Vue 组件。

## 特性

- 🔥 基于 Vue 2 + TypeScript 开发
- 💻 专为桌面端设计，基于 Element UI 组件库
- 🎨 支持主题定制和样式扩展
- 📦 支持按需引入和全量引入
- 🌍 支持 TypeScript 类型定义

## 安装

```bash
npm install @hhfe/web
# 或
pnpm install @hhfe/web
# 或
yarn add @hhfe/web
```

### 依赖要求

```bash
# 需要安装对等依赖
npm install vue@^2.6.0 element-ui@^2.15.0
```

## 使用

### 全量引入

```javascript
import Vue from 'vue';
import HhfeWeb from '@hhfe/web';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.use(HhfeWeb);

new Vue({
  el: '#app',
  render: (h) => h(App),
});
```

### 按需引入

```javascript
import Vue from 'vue';
import { Button } from '@hhfe/web';
import { Button as ElButton } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.component('el-button', ElButton);
Vue.component('cl-button', Button);

new Vue({
  el: '#app',
  render: (h) => h(App),
});
```

## 组件

### Button 按钮

基于 Element UI Button 组件封装，提供更灵活的配置选项。

#### 基本用法

```vue
<template>
  <div>
    <cl-button>默认按钮</cl-button>
    <cl-button type="primary">主要按钮</cl-button>
    <cl-button type="success">成功按钮</cl-button>
    <cl-button type="info">信息按钮</cl-button>
    <cl-button type="warning">警告按钮</cl-button>
    <cl-button type="danger">危险按钮</cl-button>
  </div>
</template>
```

#### 朴素按钮

```vue
<template>
  <div>
    <cl-button plain>朴素按钮</cl-button>
    <cl-button type="primary" plain>主要按钮</cl-button>
    <cl-button type="success" plain>成功按钮</cl-button>
    <cl-button type="info" plain>信息按钮</cl-button>
    <cl-button type="warning" plain>警告按钮</cl-button>
    <cl-button type="danger" plain>危险按钮</cl-button>
  </div>
</template>
```

#### 圆角按钮

```vue
<template>
  <div>
    <cl-button round>圆角按钮</cl-button>
    <cl-button type="primary" round>主要按钮</cl-button>
    <cl-button type="success" round>成功按钮</cl-button>
  </div>
</template>
```

#### 图标按钮

```vue
<template>
  <div>
    <cl-button type="primary" icon="el-icon-edit"></cl-button>
    <cl-button type="primary" icon="el-icon-share"></cl-button>
    <cl-button type="primary" icon="el-icon-delete"></cl-button>
    <cl-button type="primary" icon="el-icon-search">搜索</cl-button>
    <cl-button type="primary"> 上传<i class="el-icon-upload el-icon--right"></i> </cl-button>
  </div>
</template>
```

#### 按钮组

```vue
<template>
  <el-button-group>
    <cl-button type="primary" icon="el-icon-arrow-left">上一页</cl-button>
    <cl-button type="primary"> 下一页<i class="el-icon-arrow-right el-icon--right"></i> </cl-button>
  </el-button-group>
</template>
```

#### 加载中

```vue
<template>
  <div>
    <cl-button type="primary" loading>加载中</cl-button>
    <cl-button type="primary" @click="handleClick" :loading="loading"> 点击加载 </cl-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    handleClick() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },
  },
};
</script>
```

#### 不同尺寸

```vue
<template>
  <div>
    <cl-button>默认按钮</cl-button>
    <cl-button size="medium">中等按钮</cl-button>
    <cl-button size="small">小型按钮</cl-button>
    <cl-button size="mini">超小按钮</cl-button>
  </div>
</template>
```

#### 禁用状态

```vue
<template>
  <div>
    <cl-button disabled>默认按钮</cl-button>
    <cl-button type="primary" disabled>主要按钮</cl-button>
    <cl-button type="success" disabled>成功按钮</cl-button>
  </div>
</template>
```

#### 文字按钮

```vue
<template>
  <div>
    <cl-button type="text">文字按钮</cl-button>
    <cl-button type="text" disabled>文字按钮</cl-button>
  </div>
</template>
```

#### Button API

**Props**

| 参数        | 说明           | 类型    | 可选值                                             | 默认值 |
| ----------- | -------------- | ------- | -------------------------------------------------- | ------ |
| size        | 尺寸           | string  | medium / small / mini                              | —      |
| type        | 类型           | string  | primary / success / warning / danger / info / text | —      |
| plain       | 是否朴素按钮   | boolean | —                                                  | false  |
| round       | 是否圆角按钮   | boolean | —                                                  | false  |
| circle      | 是否圆形按钮   | boolean | —                                                  | false  |
| loading     | 是否加载中状态 | boolean | —                                                  | false  |
| disabled    | 是否禁用状态   | boolean | —                                                  | false  |
| icon        | 图标类名       | string  | —                                                  | —      |
| autofocus   | 是否默认聚焦   | boolean | —                                                  | false  |
| native-type | 原生 type 属性 | string  | button / submit / reset                            | button |

**Events**

| 事件名 | 说明       | 参数  |
| ------ | ---------- | ----- |
| click  | 点击时触发 | event |

**Slots**

| name | 说明           |
| ---- | -------------- |
| —    | 自定义按钮内容 |

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发环境
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check
```

## 贡献

欢迎提交 Issue 和 Pull Request 来完善这个项目。

## 许可证

MIT