npm package: @hhfe/mobile
Description: 基于Vue3和Vant的移动端组件库
Latest version: 0.1.1

# @hhfe/mobile

基于 Vue 3 和 Vant 的移动端组件库，为移动端应用提供高质量的 Vue 组件。

## 特性

- 🔥 基于 Vue 3 + TypeScript 开发
- 📱 专为移动端设计，基于 Vant 组件库
- 🎨 支持主题定制和样式扩展
- 📦 支持按需引入和全量引入
- 🌍 支持 TypeScript 类型定义

## 安装

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

### 依赖要求

```bash
# 需要安装对等依赖
npm install vue@^3.2.0 vant@^4.0.0
```

## 使用

### 全量引入

```typescript
import { createApp } from 'vue';
import HhfeMobile from '@hhfe/mobile';
import 'vant/lib/index.css'; // 引入Vant样式

const app = createApp(App);
app.use(HhfeMobile);
app.mount('#app');
```

### 按需引入

```typescript
import { createApp } from 'vue';
import { Button } from '@hhfe/mobile';
import 'vant/lib/index.css';

const app = createApp(App);
app.component('HhButton', Button);
app.mount('#app');
```

## 组件

### Button 按钮

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

#### 基本用法

```vue
<template>
  <hh-button type="primary">主要按钮</hh-button>
  <hh-button type="success">成功按钮</hh-button>
  <hh-button type="warning">警告按钮</hh-button>
  <hh-button type="danger">危险按钮</hh-button>
</template>
```

#### 按钮尺寸

```vue
<template>
  <hh-button size="large">大号按钮</hh-button>
  <hh-button size="normal">普通按钮</hh-button>
  <hh-button size="small">小型按钮</hh-button>
  <hh-button size="mini">迷你按钮</hh-button>
</template>
```

#### 朴素按钮

```vue
<template>
  <hh-button plain type="primary">朴素按钮</hh-button>
  <hh-button plain type="success">朴素按钮</hh-button>
</template>
```

#### 圆角按钮

```vue
<template>
  <hh-button round type="primary">圆角按钮</hh-button>
  <hh-button square type="success">方形按钮</hh-button>
</template>
```

#### 图标按钮

```vue
<template>
  <hh-button icon="plus" type="primary">添加</hh-button>
  <hh-button icon="star-o" icon-position="right">收藏</hh-button>
</template>
```

#### 加载状态

```vue
<template>
  <hh-button loading type="primary">加载中...</hh-button>
  <hh-button loading loading-text="提交中" type="success">提交</hh-button>
</template>
```

#### 禁用状态

```vue
<template>
  <hh-button disabled type="primary">禁用状态</hh-button>
</template>
```

#### 块级按钮

```vue
<template>
  <hh-button block type="primary">块级按钮</hh-button>
</template>
```

#### 自定义颜色

```vue
<template>
  <hh-button color="#7232dd">单色按钮</hh-button>
  <hh-button color="#7232dd" plain>单色按钮</hh-button>
  <hh-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变色按钮 </hh-button>
</template>
```

#### Button API

**Props**

| 参数          | 说明                                      | 类型                                                           | 默认值      |
| ------------- | ----------------------------------------- | -------------------------------------------------------------- | ----------- |
| type          | 类型                                      | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` |
| size          | 尺寸                                      | `'large' \| 'normal' \| 'small' \| 'mini'`                     | `'normal'`  |
| text          | 按钮文字                                  | `string`                                                       | `''`        |
| color         | 按钮颜色，支持传入 linear-gradient 渐变色 | `string`                                                       | `''`        |
| plain         | 是否为朴素按钮                            | `boolean`                                                      | `false`     |
| round         | 是否为圆角按钮                            | `boolean`                                                      | `false`     |
| square        | 是否为方形按钮                            | `boolean`                                                      | `false`     |
| loading       | 是否显示为加载状态                        | `boolean`                                                      | `false`     |
| disabled      | 是否禁用按钮                              | `boolean`                                                      | `false`     |
| icon          | 左侧图标名称或图片链接                    | `string`                                                       | `''`        |
| icon-position | 图标展示位置                              | `'left' \| 'right'`                                            | `'left'`    |
| tag           | 按钮根节点的 HTML 标签                    | `string`                                                       | `'button'`  |
| native-type   | 原生 button 标签的 type 属性              | `'button' \| 'submit' \| 'reset'`                              | `'button'`  |
| block         | 是否为块级元素                            | `boolean`                                                      | `false`     |

**Events**

| 事件名 | 说明           | 回调参数            |
| ------ | -------------- | ------------------- |
| click  | 点击按钮时触发 | `event: MouseEvent` |

**Slots**

| 名称    | 说明     |
| ------- | -------- |
| default | 按钮内容 |

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发环境
pnpm dev

# 构建
pnpm build

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

## 贡献

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

## 许可证

MIT