@hhfe/mobile

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

特性

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

安装

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

依赖要求

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

使用

全量引入

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');

按需引入

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 组件封装，提供更灵活的配置选项。

基本用法

<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>

按钮尺寸

<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>

朴素按钮

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

圆角按钮

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

图标按钮

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

加载状态

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

禁用状态

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

块级按钮

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

自定义颜色

<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 | 按钮内容 |

开发

# 安装依赖
pnpm install

# 启动开发环境
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

贡献

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

许可证

MIT