@hhfe/web

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

特性

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

安装

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

依赖要求

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

使用

全量引入

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),
});

按需引入

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

基本用法

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

朴素按钮

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

圆角按钮

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

图标按钮

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

按钮组

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

加载中

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

不同尺寸

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

禁用状态

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

文字按钮

<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 | 说明 | | ---- | -------------- | | — | 自定义按钮内容 |

开发

# 安装依赖
pnpm install

# 启动开发环境
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

贡献

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

许可证

MIT